6

我有一个链接的图像，当用户将鼠标悬停在它上面时，我想让它变成黑白。有人可以帮忙吗？我需要使用 CSS 或 JavaScript 来实现。谢谢

4

4 回答 4

6

尝试这个：

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);
}
于 2013-04-20T16:31:43.523 回答
1 
img .imgClass:hover {
    filter: grayscale(100%);
}
于 2020-09-16T13:56:19.697 回答
0

您可以寻找黑白“面具”。这是一篇关于此的文章。

于 2013-04-20T16:32:03.550 回答
-1

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

默认情况下，灰度图像是隐藏的，悬停时隐藏彩色图像并显示灰度图像。

于 2013-04-20T16:35:55.833 回答