css实现图片hover的时候改变颜色

1，问题描述：

做项目开发过程的时候，会遇到不少图标/图片在hover的时候展示出活跃色表示能够点击。
切换图源是个方案，实现起来要JS，还增加图片资源，没必要。可以用CSS来实现。

2，思路

使用活跃色的图片素材，给它一个灰色的滤镜。hover的时候取消这个滤镜，还原活跃色。

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

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

效果：