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

img .imgClass:hover {
    filter: grayscale(100%);
}

Answer 3

你可以寻找黑色和白色的“面具”。 Here是一篇关于此的文章。

Answer 4

在CSS 3中有一个图像过滤器规范，但即使在现代浏览器中也没有得到支持：

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;
}

默认灰度图像被隐藏，悬停时，彩色图像被隐藏，灰度图像被显示。

在悬停时使图像变为黑白

4 个答案: