Question

我遇到了Pseudo-element悬停的问题。我尝试了很多东西来使它工作，但没有用。我无法解决如何让它发挥作用，任何人？

HTML

    <div>
        <header id="header2">
            <ul id="midlist">
                <li class="twitter"><a href="www.twitter.com">Twitter</a>
                </li>
                <li class="facebook"><a href="www.twitter.com">Facebook</a>
                </li>
                <li class="youtube"><a href="www.twitter.com">Youtube</a>
                </li>
            </ul>
        </header>
    </div>

CSS

/* -------------------------------------------------*/
/* ----------------hover-------------------------- */

.facebook:before {
content: url(http://nobodyfilm.org/images/Mr.-Nobody-Facebook.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
}

.facebook a:hover:before {
content: url(http://nobodyfilm.org/images/Mr.Nobody-Facebook-Hover.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
  ;}

.facebook a:hover {color:red;}

/* ----------------hover----------------------------*/
/* ----------------------------------------------- */



.twitter:before{
 content: url(http://nobodyfilm.org/images/Mr.-Nobody-Twitter.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
}

.youtube:before {
 content: url(http://nobodyfilm.org/images/Mr.-Nobody-Youtube.jpg);
 padding-right: 10px;
position: relative;
bottom: -.4em;
}


#midlist {
  width:708px;
  list-style-type: none;
  margin:0 auto;
    }

#midlist li {
  float:left;
  width:112px;
  height:10px;
  line-height:0px;
  }


#header2 {
  margin-top:2px;
  margin-bottom:5px;
  background-color: #191919;
  padding:21px;
  padding-bottom: 51px;
}

http://jsfiddle.net/VrY4j/4/

谢谢！

Answer 1

更改此

.facebook a:hover:before {

到这个

.facebook:hover:before {

因为你指的是另一个对象的伪元素。

小提琴：http://jsfiddle.net/VrY4j/12/

Answer 2

你需要在之前应用：before，而不是li，因为你希望整个li都具有悬停状态。在小提琴中，我只修复了facebook。

http://jsfiddle.net/VrY4j/11/

.facebook a:before {
content: url(http://nobodyfilm.org/images/Mr.-Nobody-Facebook.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
}

.facebook:hover a:before {
content: url(http://nobodyfilm.org/images/Mr.Nobody-Facebook-Hover.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
  ;}

CSS |伪元素悬停

2 个答案: