javascript 如何在黑白图像上创建彩色图像鼠标悬停（在 JQuery 中）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18470415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create colored image mouseover on black/white images (in JQuery)
提问by Tom Geoco
I'm wondering if there are any good solutions available for turning a color image into a black/white solid state and allowing it to transition back into a colored image on mouse over using jQuery?
我想知道是否有任何好的解决方案可用于将彩色图像转换为黑色/白色固态并允许它使用 jQuery 在鼠标悬停时转换回彩色图像？
I tried a CSS method as described here: Image Greyscale with CSS & re-color on mouse-over?, but I'm not having much luck with it.
我尝试了一种 CSS 方法，如下所述：Image Greyscale with CSS & re-color on mouse-over? ，但我没有太多运气。
Here is the current site: http://frixel.com/wp/- I am trying to create the effect on the gallery grid.
这是当前站点：http: //frixel.com/wp/- 我正在尝试在画廊网格上创建效果。
回答by Jason VanHil
Hey you are talking about CSS filters... this what you need add this code to your main stylesheetfile ;)
嘿，您说的是 CSS 过滤器……这是您需要将此代码添加到主样式表文件中的内容；)
.portfolio:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}
回答by Michal - wereda-net
maybe a solution would be to use this plugin:
也许一个解决方案是使用这个插件：
http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/
http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/
a demo with carousel: http://interio.tohidgolkar.com/shortcodes/clients-carousel/
带轮播的演示：http: //interio.tohidgolkar.com/shortcodes/clients-carousel/
回答by M. Lak
Use this below code, It helps to create colored image mouseover on black/white image.:
使用下面的代码，它有助于在黑白图像上创建彩色图像鼠标悬停。：
<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"/>
Demo: Here
演示：这里
