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

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

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

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

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

这种方法对 .img .png .svg 格式的素材都适用。