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

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

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

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

    image.png

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