使图像在悬停时变成黑白

Make an Image turn Black and White on hover

本文关键字：黑白 悬停 图像      更新时间：2023-09-26

我有一个链接的图像，我想让它变成黑色和白色，当用户悬停在它。有人能帮忙吗?我需要使它与CSS或JavaScript。由于

try this:

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

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

您可以查找黑色和白色的"蒙版"。

在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>
(未测试) 
a img.grayscale {
  display: none;
}
a:hover img.color {
  display: none;
}
a:hover img.grayscale {
  display: block;
}

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

相关文章：