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

一时失言乱红尘 2022-10-26 14:05 212阅读 0赞

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

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

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

## 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、图片显示隐藏 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/239bcbc4f866468584f69c23f59bf860.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/222e8e8427a8403db8562a918b15615c.png