鼠标悬停时，图片切换的方法

在我们写前端页面时，经常会遇到这种情况，就是鼠标悬停某个图标或者图片时，图片颜色发生了变化或者图片发生改变。这种情况如何实现？1、直接在html样式里进行切换<div class="container"><img src="../img/icon-social-ip-white.png"onmouseover="this.src='../img/icon-social-ip-bl

爱喝奶茶的小韩

14392人浏览 · 2021-02-02 14:15:01

爱喝奶茶的小韩 · 2021-02-02 14:15:01 发布

在我们写前端页面时，经常会遇到这种情况，就是鼠标悬停某个图标或者图片时，图片颜色发生了变化或者图片发生改变。
这种情况如何实现？

1、直接在html样式里进行切换

<div class="container">
        <img src="../img/icon-social-ip-white.png" 
        onmouseover="this.src='../img/icon-social-ip-blue.png'" 
        onmouseout="this.src='../img/icon-social-ip-white.png'" alt="">
    </div>

正常情况下我们的img标签只放一张图片，如果要实现鼠标悬停后图片发生改变，可以在标签里加上οnmοuseοver="this.src=’…/img/xxx’（切换后的图片） ,οnmοuseοut="this.src=’…/img/xxx’（鼠标移开后的图片），注意，路径不要写错了。
如图：
在这里插入图片描述

2、将背景图的路径改变

有时候我们会在css样式里引入图片；
只要将悬停后的图片路径改变就行了。

.bg{
      background: url(../img/icon-social-ip-white.png) no-repeat center;
      width: 25px;
      height: 23px;
      padding: 50px 50px;
       }
.bg:hover{
     background: url(../img/icon-social-ip-blue.png) no-repeat center;
       }

3、图片显示隐藏

<div class="bg">
            <img src="../img/icon-social-ip-white.png" alt="">
            <img src="../img/icon-social-ip-blue.png" alt="">
        </div>

.bg{
           position: relative;
       }
       img{
           display: block;
           width: 40px;
           height: 40px;
           position: absolute;
       }
       .bg img:last-child{
           display: none;
       }
       .bg:hover img:last-child{ 
           display: block;
       }

4、图片透明度改变

.bg{
           position: relative;
       }
       img{
           opacity: 1;
           width: 40px;
           height: 40px;
           position: absolute;
       }
       .bg img:last-child{
           opacity: 0;
       }
       .bg:hover img:last-child{ 
           opacity: 1;
       }