我想用悬停改变图像

Question

我一直在从头开始编写我的投资组合网站，当我将鼠标悬停在画廊中的缩略图上时，我想实现图像更改（黑白到彩色）。有没有办法轻松做到这一点？我有 14 张图片，每张两张（彩色和黑白）。

谢谢！

Answer 1

您可以为您和您的访问者节省一些流量，并且只有一张彩色图像，您可以使用CSS filter 去饱和。

将类分配给您的 HTML 图像：<img class="image-bw" src="image.jpeg"/>

使用此 CSS 使您的图像在非悬停状态下为黑白：

.image-bw {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

并在悬停状态下关闭此过滤器：

.image-bw:hover {
    -webkit-filter: none;
    filter: none;   
}

考虑到此解决方案在 IE 中不起作用。有关详细的浏览器兼容性信息，请参阅 here。您也可以使用 SVG 图像，它可以在 IE 中去饱和，如 here 所述。

如果您想使用两个图像，this question 中描述了几种方法。