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

最新推荐文章于 2024-11-08 12:54:35 发布

原创最新推荐文章于 2024-11-08 12:54:35 发布 · 1.5w 阅读

114 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5 #前端

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了四种在前端页面中实现鼠标悬停时图片切换的方法：1) 使用HTML的οnmοuseοver和οnmοuseοut事件直接在标签内切换图片源；2) 在CSS中通过改变背景图路径实现悬停效果；3) 利用图片的显示与隐藏控制悬停状态；4) 使用透明度变化为图片添加过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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