如何在黑白图像上创建彩色图像鼠标悬停（在 JQuery 中）答案

【问题标题】：How to create colored image mouseover on black/white images (in JQuery)如何在黑白图像上创建彩色图像鼠标悬停（在 JQuery 中）
【发布时间】：2013-08-30 11:52:04
【问题描述】：

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

我尝试了这里描述的 CSS 方法：Image Greyscale with CSS & re-color on mouse-over?，但我运气不佳。

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

【问题讨论】：

为了帮助别人回答这个问题，我建议在你的问题中发布相关的 HTML、CSS 和 javascript。
您发布的示例使用了 SVG 图像，您可以对其进行操作。例如，您可以使用普通图像替换 SRC...
图片只有两种版本，一种颜色，一种黑白，hover时改变src属性。这将是处理此问题的最快/最可靠的方法。

标签： javascript jquery css

【解决方案1】：

嘿，你说的是 CSS 过滤器……这就是你所需要的将此代码添加到您的 主样式表 文件中；）

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

【讨论】：

【解决方案2】：

也许一个解决方案是使用这个插件：

http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

带有轮播的演示： http://interio.tohidgolkar.com/shortcodes/clients-carousel/

【讨论】：

【解决方案3】：

使用下面的代码，它有助于在黑白图像上创建彩色图像鼠标悬停。：

<style>
.blk-white{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript">
function display_blackwhite(obj) {
$(obj).addClass("blk-white");
}
function display_colorphoto(obj) {
$(obj).removeClass("blk-white");
}
</script>
</head>
<body>
<img src="change-colorphoto-black-white1.jpg" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>
<img src="change-colorphoto-black-white2.png" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>

【讨论】：