如何使用懸停效果（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 ，所以可能在您的圖像路徑中。

我將您的代碼粘貼到了這個小提琴中 ，僅將背景圖像更改為背景顏色，當您將鼠標懸停在其上方時，您會看到它從紅色變為綠色。