用纯CSS创建水平可折叠手风琴 [英] Create horizontal collapsible accordion with pure CSS

问题描述

我有4个部分，如下所示：

I have 4 divisions as follows :

悬停第1个元素时，它变成：

On hovering the 1st element it becomes :

即，我使用〜选择器悬停第一个元素时更改了下一个元素的CSS。

ie I changed the CSS of the next elements on hovering the 1st using '~' selector.

/* hover on 1 */
#pillar1:hover {
width: 64%;
}
#pillar1:hover ~ #pillar2{
width: 12%;
}
#pillar1:hover ~ #pillar3{
width: 12%;
}
#pillar1:hover ~ #pillar4{
width: 12%;
}

但是将鼠标悬停在下一个分区时，使用代码

But on hovering the next divisions, using the code

/* hover on 2 */
#pillar2:hover {
width: 64%;
}
#pillar2:hover ~ #pillar1{
width: 12%;
}
#pillar2:hover ~ #pillar3{
width: 12%;
}
#pillar2:hover ~ #pillar4{
width: 12%;
}

不会发生转换。

HTML

 <section class="pillars">

<div id="pillar1"></div>
    <div id="pillar2"></div>
<div id="pillar3"></div>
<div id="pillar4"></div>
</section>

我该如何做？

推荐答案

当使用〜该元素是悬停的，所以只有一个属性将为你的工作

When you use ~ it will select elements which are followed after the element which is hovered, so just one property will do the job for you i.e

display: flex;

演示

HTML

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap {
    display: flex;
}

.wrap > div {
    height: 100px;
    width: 33%;
    flex: 1;
    border: 1px solid #f00;
    -webkit-transition: flex .5s;
    transition: flex .5s;
}

.wrap > div:hover {
    flex: 3;
}

这篇关于用纯CSS创建水平可折叠手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！