懸停圖像效果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'); 
}