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

直接在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’（鼠标移开后的图片）

将背景图的路径改变

有时候我们会在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;
       }

图片显示隐藏

<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;
       }

图片透明度改变

.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;
       }

图片转文字

  .mask1{
    width: 500px;
    font-size: 67px;
    font-family: Alibaba Sans;
    font-weight: 500;
    color: black;
    line-height: 142px;
    position: absolute;
    top:-9px;
    left: -160px;
    background: rgba(255, 255, 255, 1);
    display: none;
  }
.img_content1{
    position: relative;
    padding: 0;
}

<div class="img_content1">
              <a href="">
            <img
              class="img6"
              referrerpolicy="no-referrer"
              src=""
            />
            <span class="mask1">xxx</span>
            </a>
            </div>

$(function(){
  $(".layer7").mouseover(function(){          
    $(".mask1").show();$(".layer7").hide();
});
  $(".img_content1").mouseout(function(){
  $(".mask1").hide();$(".layer7").show();
});
});