CSS |伪元素悬停

-2

与 Pseudo-element小号悬停

我有问题。我尝试了一堆东西，使其工作，但无济于事。我无法围绕如何使它工作，任何人？CSS |伪元素悬停

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/

谢谢！

来源

2013-01-17 Spectre

[http://jsfiddle.net/VrY4j/10/](http://jsfiddle.net/VrY4j/10/） – Morpheus

这个问题会得到更多的爱，如果它是按照该准则[问一个很好的问题（http://stackoverflow.com/questions/how-to-ask）。 – Jon

描述过短而凌乱，但至少他张贴了小提琴，他的小提琴是不言自明。但是幽灵，只是链接到小提琴是不要去的好办法，所以不应该依赖于外部网站的问题也没有答案，因为如果这些网站已关闭，这样用户就无法了解什么是问题/回答。我将修改它适合你，自己做下一次... –

更改此

.facebook a:hover:before {

这个

.facebook:hover:before {

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

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

来源

2013-01-17 09:52:19

你需要应用：之前的一个，而不是李，因为你希望整个里有悬停状态。在小提琴中，我只修复了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; 
    ;}

来源

2013-01-17 09:50:23 Syren

谢谢，效果很好！ – Spectre

CSS |伪元素悬停

回答

相关问题