如何使用懸停效果（CSS）更改圖像顏色？

Question

我試圖在圖片上設置懸停效果，以便在鼠標懸停時更改顏色。這是我的html：

<div class="col s4"> 
    <ul id="social"> 
    <li id="fb"></li> 
    <li id="tw"></li> 
    <li id="em"></li> 
    <li id="fa"></li> 
    </ul> 
    </div> 

這是我的CSS：

ul#social li#fb { 
    height:32px; 
    width:32px; 
    background-image:url(../img/social/Facebook-icon-(1).png); 
} 

ul#social li#fb:hover{ 
    background-image:url(../img/social/Facebook-icon.png); 
} 

[...] 

第一背景圖像是黑白的，第二個是彩色的。不幸的是，我的代碼不起作用：它不會以黑白方式顯示圖像。如果強制爲背景圖像，我可以正確地看到彩色圖像，但懸停效果無法正常工作。

我在哪裏錯了？

Answer 1

問題不在於:hover，所以它可能在您的圖像路徑中。

我把你的代碼粘貼到this fiddle中，只是將background-image改爲background-color，你可以看到當鼠標移到它上面時它會從紅色變成綠色。