鼠标悬停图标反白filter

鼠标悬停图标反白

如果只是单纯的鼠标悬停字体跟背景颜色发生变化的话, 很简单, 用几行代码就可以实现:

span:hover{
  background: #00a84d;
  color: #fff;
}

但是现在需要将图片颜色也改变, 由于UI小姐姐只给了鼠标没有悬停上去的图片, 所以鼠标悬停上去的图片就需要我们自己把这个变色之后的图整出来了.
查了百度,说是有一个简单的方法,只需要在div上添加 filter: brightness(100); 属性即可, 但是效果出来不太理想, 会有色差, 结果如图所示:

百度上还有一种方法. 就是利用CSS filter滤镜任意色值转换在线工具
使用和转换示意如下GIF：

第一个输入框输入原始的图标颜色，下面输入框输入图片目标颜色，点击“转换”按钮，对应的filter CSS代码就生成了,但是转换之后的结果会存在误差,并非100%, 我们可以一直点击转换, 去寻找那个最精确的filter代码. 我操作了一番之后, 发现找到那个最精确的值有点困难.

所以,我就继续在度娘上继续摸索, 终于有了成果, 就是使用CSS遮罩实现任意颜色图标, 这个相比上面的滤镜，性能要比滤镜好，色值定义也更简单, 它让我实现了自己想要的样式, 直接放代码吧:

.colorful1 {
  display: inline-block;
  width: 21px;
  height: 20px;
  background-color: #00a84d;
  -webkit-mask: url(../../../../../static/img/index/eye.svg) no-repeat;
  mask: url(../../../../../static/img/index/eye.svg) no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

这个就是鼠标未悬停的的样式, 鼠标悬停之后的样式只需要改一下背景色即可:

.preview:hover .colorful1 {
  background-color: #fff;
}

注意: 这种方式就是不使用 img 标签导入图片, 而是利用遮罩添加图片链接, 我这里是用i标签去设置的, 你们用哪个标签都可以, 所以我们的html代码就需要写成:

<span class="preview">
    <i class="colorful1"></i>
    预览
</span>

这样就可以实现我们想要的反白效果了 !