CSS實現鼠標上移圖片加彩色（濾鏡）

先看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