css：hover实现图片手风琴

css手风琴

样式图

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！