关于前端:css-实现图片hover的时候改变颜色

做我的项目的时候，会遇到不少图标/图片在hover的时候展现出沉闷色示意可能点击。
切换图源是个计划，实现起来要JS，还减少图片资源，没必要。能够用CSS来实现。

思路是应用沉闷色的图片素材，给它一个灰色的滤镜。hover的时候勾销这个滤镜，还原沉闷色。

img {
filter: grayscale(100%);
opacity: 0.6;
}

img:hover {
filter: none;
opacity: 1;
}

这种办法对 .img .png .svg 格局的素材都实用。