CSS———如何利用CSS实现hover 切换图片效果

文章目录

• 前言
• 一、案例示例图
• 二、实现过程
  • 1.HTML结构
  • 2.CSS样式

一、案例示例图

       如图所示，图片无hover时是灰色状态的，当触发hover效果时，图片切换为橘色状态，那么这种效果如何利用css呈现呢？

             

触发hover效果时

               

---

二、实现过程

1.HTML结构

  <!-- 右侧固定导航栏 -->
        <div class="right-list">
                <a class="img1" href="#">
                    <img src="./image/1.png" alt="">
                    <span>手机APP </span>
                    <div class="right-triangle">

                    </div>
                    <div class="right-appcode">
                        <img src="./image/小米二维码.png" alt="">
                        <span>扫码领取新人百元礼包</span>
                    </div>
                </a>
                <a class="img2"  href="#"><img src="./image/2.png" alt=""><span>个人中心 </span></a>
                <a class="img3"  href="#"><img src="./image/3.png" alt=""><span>售后服务 </span></a>
                <a class="img4"  href="#"><img src="./image/4.png" alt=""><span>人工客服 </span></a>
                <a  class="img5" href="#"><img src="./image/5.png" alt=""><span>购物车 </span></a>
        </div>

---

2、CSS样式

 /* 设置右侧固定侧边栏样式 */
        .right-list{
            position: fixed;
            bottom: 70px;
            right: 0;
            width: 82px;
            height: 464px;
            border: 1px solid #f5f5f5;
            border-right: none;
        }
        .right-list li:last-child{
            border-bottom: none;
        }
        .right-list img{
        position: absolute;
            top: 15px;
            left: 27px;
            width: 30px;
            height: 30px;
        }
        .right-list a{
            position: relative;
            display: block;
            width: 82px;
            height:92px;
            font-size: 14px;
            color:#757575;  
            background-color: #ffffff;
            border: 1px solid #fff5f5;  
         }
         .right-list span{
            position: absolute;
            top: 55px;
            left:17px;
         }
         .right-list a:hover{
            color:#FF6700;
         }
         /* hover切换图片 */
         .right-list .img1:hover>img{
        content: url(./image/手机APP.png);
         }
         .right-list .img2:hover img{
        content: url(./image/个人中心.png);
         }
         .right-list .img3:hover img{
        content: url(./image/售后服务.png);
         }
         .right-list .img4:hover img{
        content: url(./image/人工客服.png);
         }
         .right-list .img5:hover img{
        content: url(./image/购物车.png);
         }
         /* 手机app左侧弹出框 */
        .right-appcode{
            display: none;
            position: relative;
            width: 124px;
            height: 168px;
            right: 135px;
        font-size: 14px;
        border: 1px solid #f5f5f5;
        color: #333;
        background: #fff;
        text-align: center;
        line-height: 1;
        }
        .right-appcode img{
            position: absolute;
            width: 90px;
        height: 90px;
        left: 15px;
        }
        .right-appcode span{
            position: absolute;
            top: 110px;
            width: 80px;
            left: 20px;
            line-height: 20px;
        }
        /* 右侧三角形 */
        .right-triangle{
            display: none;
        position: absolute;
        top: 40px;
        right: 85px;
        width: 12px;
        height: 12px;
        background-color: #fff;
        border-top: 1px solid  #f5f5f5;
        border-right: 1px solid #f5f5f5;
        transform: rotate(45deg);
        z-index: 50;
        }
        /* 手机app hover时出现左侧弹出层 */
        .img1:hover .right-appcode,
        .img1:hover .right-triangle{
            display: block;
        }

3、实现图片切换

       如果你仔细观察小米商城官网，你就会发现官网的结构也是使用了两张颜色不同的图片堆叠在一起，当hover时切换图片的方式。我也是采用了这种方式实现的这个效果，如果有小伙伴看到并知道有更好的方法解决这个问题，欢迎留言~

 /* hover切换图片 */
         .right-list .img1:hover>img{
        content: url(./image/手机APP.png);
         }
         .right-list .img2:hover img{
        content: url(./image/个人中心.png);
         }
         .right-list .img3:hover img{
        content: url(./image/售后服务.png);
         }
         .right-list .img4:hover img{
        content: url(./image/人工客服.png);
         }
         .right-list .img5:hover img{
        content: url(./image/购物车.png);
         }