如何使用悬停效果（CSS）更改图像颜色？答案

【问题标题】：How to change an image color with hover effect (CSS)?如何使用悬停效果（CSS）更改图像颜色？
【发布时间】：2015-08-07 07:44:34
【问题描述】：

我正在尝试在图像上设置悬停效果，以便当鼠标悬停在图像上时它会改变颜色。这是我的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);
}

[...]

第一个背景图像是黑白的，第二个是彩色的。然而不幸的是，我的代码不起作用：它不会以黑白显示图像。如果将彩色图像强加为背景图像，我可以正常看到它，但悬停效果无论如何都不起作用。

我哪里错了？

【问题讨论】：

您可以尝试制作一个包含两种状态的图像，显示第一个法线并更改背景位置：悬停
我猜你图片名称中的 () 是导致这种情况发生的原因
工作jsfiddle.net/soledar10/b320darL

标签： html css image hover effect

【解决方案1】：

问题不在:hover，所以很可能是你的图片路径。

我把你的代码贴在this fiddle里，只是把背景图片改成背景颜色，你可以看到当你的鼠标在它上面时，它从红色变成了绿色。

【讨论】：