css：hover实现图片手风琴

最新推荐文章于 2024-09-04 07:11:11 发布

西瓜西瓜__

最新推荐文章于 2024-09-04 07:11:11 发布

阅读量254

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_53233068/article/details/119546982

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用CSS实现手风琴效果，通过改变盒子宽度展示和隐藏内容。在实现过程中遇到了选择器优先级问题，即`.wrap:hover.box`的样式覆盖了`.box:hover`，导致样式生效异常。解决方案是提升`.box:hover`的优先级，使其与`.wrap:hover.box`相等，从而确保鼠标悬停时正确显示宽为500px的图片。

摘要由CSDN通过智能技术生成

css手风琴

样式图

图一：原始状态
图二：鼠标移入box4
图三：鼠标移入box3

html代码块

<div class="wrap">
        <div class="box">
            <img src="https://img2.baidu.com/it/u=3247838944,1400127521&fm=26&fmt=auto&gp=0.jpg" alt="">
            <div class="top">山谷奇景</div>
            <div class="bottom">山谷奇景</div>
        </div>
        <div class="box">
            <img src="https://img1.baidu.com/it/u=735835342,1306615602&fm=26&fmt=auto&gp=0.jpg" alt="">
            <div class="top">绿野迷踪</div>
            <div class="bottom">绿野迷踪</div>
        </div>
        <div class="box">
            <img src="https://img2.baidu.com/it/u=152097944,2973261282&fm=26&fmt=auto&gp=0.jpg" alt="">
            <div class="top">川流不息</div>
            <div class="bottom">川流不息</div>
        </div>
        <div class="box">
            <img src="https://img1.baidu.com/it/u=3084374139,1933246019&fm=26&fmt=auto&gp=0.jpg" alt="">
            <div class="top">繁华都市</div>
            <div class="bottom">繁华都市</div>
        </div>
    </div>

css样式

		.wrap{
            width: 800px;
            height: 350px;
            margin: 0 auto;
            margin-top: 180px;
            transition:  0.5s;
            background-color: rgba(0, 0, 0, 0.3);
        }
        img{
            width: 500px;
            height: 350px;
        }
        .box {
            width: 200px;
            height: 350px;
            position: relative;
            float: left;
            overflow: hidden;
            transition: 0.5s;
        }

        .top {
            width: 100%;
            height: 350px;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
            text-align: center;
            line-height: 350px;
            position: absolute;
            transition: 0.5s;
            top: 0;
        }

        .bottom {
            width: 100%;
            height: 350px;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
            text-align: center;
            line-height: 350px;
            transition: 0.5s;
            position: absolute;
            bottom: 0;
        }
        .wrap:hover .box{
            width: 100px;
        }
        
        /*.box:hover{width: 500px;}*/
        
        .wrap .box:hover{
            width: 500px;
        }
        .wrap .box:hover .top{
            line-height: 50px;
            height: 50px;
        }
        .wrap .box:hover .bottom{
            line-height: 50px;
            height: 50px;
        }

分享一下手风琴源码
需要注意的是在当鼠标移入其中一张图片时，使得当前这个图片的盒子宽度为500px可以完整展现图片，既.box:hover{width: 500px;}
但是由于css当中还有一个
.wrap:hover .box{width: 100px;}，其效果是使得鼠标移入容器wrap时所有的div盒子宽度都为100px
这就使得.box:hover{width: 500px;}失效。
因为.wrap:hover .box{width: 100px;}的优先级为10+10+1大于.box:hover{width: 500px;}的优先级10+1
所以鼠标移入box的css样式失效，box的宽度仍为鼠标移入wrap的宽度100px！
解决办法：可以再.box:hover{width: 500px;}前再加上一层.wrap使得其优先级与.wrap:hover .box{width: 100px;}相等。
代码的执行是由上到下，自左儿右，所以前后两个优先级相等的都是对box宽度进行设置的css样式都可以执行。
但是后面的宽度设置覆盖先前的设置，使得其他box宽度为100px而鼠标移入的当前盒子宽度为500px！