hover - 在 HTML img src="image.jpeg" 内部时，如何在图像上添加灰色悬停效果

Question

当您将鼠标悬停在图像上时，我正在尝试为图像添加浅灰色，我实现了一个 jquery 滑块，它通过下面的代码拉入图像

<li>
<img src="new_z1.jpg" alt="" width="250" height="100">  </li>

向图像添加灰色悬停效果的最佳方法是什么？

这是网站，轮播位于页面底部，带有所有徽标

http://goo.gl/CoZgB

Answer 1

你想让你的图像灰度吗？如果是这样，就用这个

演示

反向 演示

img:hover {
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
     filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

如果您需要平滑度，只需使用 CSS3 过渡 :)

Answer 2

这是一个对同一件事有帮助的演示：

http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

或者，您可以在悬停时加载不同的图像。这需要更少的代码，但需要另一个图像加载。