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

HTML CSS 两种方法：实现鼠标悬停，切换图片第一种方法：利用css的display属性第二种方法：利用css的background属性展示第一种方法：利用css的display属性html：<div class="light"><img class="yellow" src="../../assets/imgs/icon_yel.png" alt="黄色灯泡">&lt

奶绿走糖

19552人浏览 · 2021-10-09 16:52:12

奶绿走糖 · 2021-10-09 16:52:12 发布

展示

在这里插入图片描述

第一种方法：利用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;
}