共计 224 个字符，预计需要花费 1 分钟才能阅读完成。
做我的项目的时候，会遇到不少图标 / 图片在 hover 的时候展现出沉闷色示意可能点击。
切换图源是个计划，实现起来要 JS，还减少图片资源，没必要。能够用 CSS 来实现。
思路是应用沉闷色的图片素材，给它一个灰色的滤镜。hover 的时候勾销这个滤镜，还原沉闷色。
img {
filter: grayscale(100%);
opacity: 0.6;
}
img:hover {
filter: none;
opacity: 1;
}
这种办法对 .img .png .svg 格局的素材都实用。
正文完