如何使用悬停效果（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，只将背景图像更改为背景颜色，当鼠标悬停在它上面时，您可以看到它从红色变为绿色。