CSS：实现鼠标悬停，切换图片的两种方法

展示

第一种方法：利用css的display属性

html：

	<div class="light">
      <img class="yellow" src="../../assets/imgs/icon_yel.png" alt="黄色灯泡">
      <img class="red" src="../../assets/imgs/icon_red.png" alt="红色灯泡">
    div>

css：

.light{
  width: fit-content;
  cursor: pointer;
  .red{ display: none;}
  .yellow{ display: block;}
  &:hover{
    .red{ display: block;}
    .yellow{ display: none;}
  }
}

第二种方法：利用css的background属性

html：

<div class="changeImg">div>

css：

.changeImg{
  width: 24px;
  height: 32px;
  cursor: pointer;
  background: url('../../assets/imgs/icon_yel.png') no-repeat;
  &:hover{
    background: url('../../assets/imgs/icon_red.png') no-repeat;
  }
}

// 上面使用的是scss写法，看不懂的童鞋可以看下面这个css写法：
.changeImg{
  width: 24px;
  height: 32px;
  cursor: pointer;
  background: url('../../assets/imgs/icon_yel.png') no-repeat;
}
.changeImg:hover{
  background: url('../../assets/imgs/icon_red.png') no-repeat;
}