鼠标移入图标显示颜色

今天有些空闲，了解了解现在前端的技术，无意中看到一个鼠标移入图片显示颜色这个功能，通常的时候我们会用雪碧图，改变不同的位置显示不同的图片，或者两张图片替换，但是今天意外发现一整更简便的方法，一张图片就可以搞定，那就是css的filter实现。好了不多说直接看代码吧。

html代码：

<div class="img_outer">
    <img src="2.jpg">
</div>

css代码： 

.img_outer>img{
    width: 200px;
    height: 200px;
    cursor: pointer;
    filter: grayscale(100%);
    transition:all 0.2s;
}
.img_outer>img:hover{
    filter: none;
}

下面就是运行后的效果我们来看看吧。

第一张是鼠标未移入的效果，第二张是鼠标移入的效果。