css - CSS | 伪元素悬停

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 应用于 a，而不是 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;
  ;}