javascript - 如何在黑白图像上创建彩色图像鼠标悬停(在 JQuery 中)

Question

我想知道是否有任何好的解决方案可以将彩色图像转换为黑白固态，并允许其在鼠标悬停时使用 jQuery 转换回彩色图像？

我尝试了如下所述的 CSS 方法:Image Greyscale with CSS & re-color on mouse-over? ，但我运气不太好。

这是当前站点:http://frixel.com/wp/ - 我正在尝试在画廊网格上创建效果。

Answer 1

嘿，你正在谈论 CSS 过滤器...这正是你所需要的将此代码添加到您的主样式表文件中;)

.portfolio:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}