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

最新推荐文章于 2022-08-25 19:57:05 发布

奶绿走糖

最新推荐文章于 2022-08-25 19:57:05 发布

阅读量1.9w

点赞数 25

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/ljtjianting/article/details/120674452

版权

css 专栏收录该内容

9 篇文章

订阅专栏

展示

在这里插入图片描述

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