css3实现鼠标移入图片变色

css3实现鼠标移入图片变色
方法一：准备两张图片，直接更改hover后的背景图片。这种方法简单粗暴，我就不过多赘述了。
方法二，利用css3的filter滤镜。不知道filter的同学可以去W3c多看看哈。链接: w3c官网.

首先看一下HTML的结构

<div class="img">
            <img src="../images/topmenu1.png" alt="">
  </div>

结构很简单，就是用一个div包裹图片。
接下来看一下css样式

 .img {
    height: 26px;
    overflow: hidden;
}

 .img：hover img {
    transform: translateY(-26px);
    filter: drop-shadow(#656FF4 0 26px);
}

鼠标移入，图片变色的效果就完成啦，相比第一种方法，我个人感觉更加便利有效。