悬停图像效果CSS

Question

我有this site。在页脚中，我有一个包含社交图标的列表。

这是HTML代码：为.social-list

<div class="social-list"> 
    <ul> 
     <li id="first"><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri1.png" alt="Smiley face" height="30" width="30"></li> 
     <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri2.png" alt="Smiley face" height="30" width="30"></li> 
     <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri3.png" alt="Smiley face" height="30" width="30"></li> 
     <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri4.png" alt="Smiley face" height="30" width="30"></li> 
     <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri5.png" alt="Smiley face" height="30" width="30"></li> 
    </ul> 
</div> 

这是CSS代码：

.social-list { 
    float: left; 
    display: inline-block; 
    margin-left: -92px; 
} 

我要创建在图像的效悬停。

我想这样做，但它不工作：

#first:hover { 
    background:url("http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/roz1.png"); 
} 

什么是错的代码？

Answer 1

问题是，您正在将背景更改为li，但图像仍位于顶部，因此它覆盖了它并且看不到它。

这个想法是删除li中的img，并专门用于li背景。就像这样：

#first { 
    background-image:url('http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri1.png'); 
    width:30px; 
    height:30px; 
    display:inline-block; 
} 

#first:hover { 
    background-image:url('http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/roz1.png'); 
}