文章目录
前言一、案例示例图二、实现过程 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);}
