显示悬停时着色的图像

Question

如何在鼠标悬停时显示彩色图像？

我的问题类似于我跟随递归更改图像的jQuery脚本。

• 灰度图像

• 彩色图片

  $(document).ready(function () {
        $("#image").hover(function () {
            $(this).attr("src", "tpi/colored.jpg");
        }, function () {
            $(this).attr("src", "tpi/grayscale.jpg");
  
        });
    });
  

现在在css或jQuery中有没有其他方法可以做到这一点，而不是在悬停时一次使用两个图像？

Answer 1

在chrome http://jsfiddle.net/HF8c7/

中使用 DEMO

-webkit-filter: grayscale(100%);