使图像变成黑白悬停

Question

我有一个链接的图像，我想让当用户将鼠标悬停于它，它变成黑色和白色。任何人都可以帮忙吗？我需要使用CSS或JavaScript来制作它。由于

Answer 1

试试这个：

img.imgClass:hover { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE5+ */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ 
} 
img.imgClass { 
    filter: none; 
    -webkit-filter: grayscale(0); 
} 

Answer 2

你可以找黑与白 “面具”。 Here是一篇文章。

Answer 3

在CSS 3有图像过滤器的规范，但这不是widly即使在现代浏览器还支持：

img:hover { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE5+ */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ 

} 

相反，你可以使用这个效果每一个图像的黑色和白色可供选择：

<a href="..."><img class="grayscale" src="..." /><img class="color" src="..." /></a> 

有了这个CSS：（未测试）

a img.grayscale { 
    display: none; 
} 
a:hover img.color { 
    display: none; 
} 
a:hover img.grayscale { 
    display: block; 
} 

默认GRA yscale图像是隐藏的，悬停在彩色的人隐藏和灰度显示。