css实现鼠标移入时img图标变色

有时候我们需要实现类似鼠标移入img图标变色的功能，虽然提前准备好两张相应颜色的图片就可以解决问题，但是使用css也是可以做到让img图标变色的

首先使用一个div将img包裹起来

<div class=“imgtest”>
    <img src="images/logo.png" alt="">
</div>

然后定义该div的样式

.imagetest{
    width:50px;
    height:50px;
    overflow：hidden;
}

再定义鼠标移入的时候img的样式

.imagetest:hover img{
    transform: translateY(-50px);
    filter: drop-shadow(#66ccff 0 50px);
    //颜色、x轴偏移量、y轴偏移量
}

 

原理解释

1. div设置overflow：hidden的话就意味着，超出该div的长宽范围的内容就不会显示了
2. hover的时候img先向y轴负方向偏移50px（隐藏了），然后经过滤镜处理颜色的“新”图片再向y轴正方向偏移50px（回来了）