我想使用悬停更改图像

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中介绍几种方法。