CSS实现鼠标上移图片加彩色（滤镜）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_36070288/article/details/101193772

先看gif

讲解

• 下面的css文件是.styl后缀，使用了stylus预处理器搭配vue框架使用的
• 关键是下面这个属性（滤镜）：

filter grayscale(100%)

• 这句代码的意思很简单，修改图片的颜色为黑白

&:hover
    filter none

• 当鼠标hover到图片上是修改图片为默认值，没有效果
• 下面代码也补充了如何合理画边框的方法，主要用到nth-of-type()及nth-last-child()这两个属性

.item
  cursor pointer
  padding 14px 20px
  filter grayscale(100%)
  width 144px
  height 64px
  // box-sizing border-box
  border-right 1px solid #ddd
  border-top 1px solid #ddd
  &:hover
    filter none
  &:nth-of-type(6n+1)
    border-left 1px solid #ddd
  &:nth-last-child(1), &:nth-last-child(2), &:nth-last-child(3), &:nth-last-child(4), &:nth-last-child(5), &:nth-last-child(6)
    border-bottom 1px solid #ddd