使用纯CSS创建水平可折叠手风琴

Question

我有以下四个部门：

在悬停第一个元素时，它变为：

即我使用＆＃39;〜＆＃39;改变了悬停在第一个元素上的下一个元素的CSS。选择器。

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

但是在徘徊下一个部门时，使用代码

/* 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>

我该怎么做？

Answer 1

当你使用~时，它将选择在悬停的元素之后所遵循的元素，因此只有一个属性可以为你完成工作，即

display: flex;

Demo

<强> 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;
}

Answer 2

我认为您可以像这样使用解决方法：

.pillars > div {
  width: 25%;
  float:left;
  ...
}
.pillars:hover > div {
  width:12%;
}
.pillars > div:hover {
  width: 64%;
}

Demo.

我们必须通过一种解决方法来实现这一目标的原因是我们无法使用CSS3选择器进行遍历，也就是当您将鼠标悬停在列表项上时，无法遍历以前的列表要将其宽度设置为12%的项目。但是，将鼠标悬停在列表项上也会触发悬停在父容器上。因此，我们可以通过将width:12%设置为悬停父级的所有列表项来使其工作。

Answer 3

Updated: Demo Fiddle

HTML

<div class='expanded'></div>
<div></div>
<div></div>
<div></div>

CSS

html, body {
    width:100%;
    padding:0;
    margin:0;
}
div {
    float:left;
    width:12%;
    height:100px;
    border:1px solid red;
    background:lightgrey;
    transition:width 100ms ease-in;
    box-sizing:border-box;
}
.expanded {
    width:64%;
}

的jQuery

$("div").hover(

function () {
    $("div").removeClass("expanded");
    $(this).addClass("expanded");
}, function () {
    $("div").removeClass("expanded");
    $("div:first").addClass("expanded");
});

---

Alternative Solution

HTML

<div class="table">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

html, body {
    width:100%;
    padding:0;
    margin:0;
}
.table {
    display:table;
    height:100px;
    width:100%;
}
.table div {
    display:table-cell;
    width:12%;
    border:1px solid red;
    background:lightgrey;
    transition:width 100ms ease-in;
}
.table div:hover {
    width:64%;
}

Answer 4

与已发布的解决方案类似的解决方案，但imho实际上只是坚如磐石

JSFIDDLE DEMO

<div class="wrap">
    <div><img src="http://lorempixel.com/600/300/people/5/" style="display:block;"/></div>
    <div><img src="http://lorempixel.com/600/300/people/5/" style="display:block;"/></div>
    <div><img src="http://lorempixel.com/600/300/people/5/" style="display:block;"/></div>
</div>

.wrap
{
    display:table;
    width:100%;
    table-layout:fixed;
}

.wrap > div {
    display:table-cell;
    border:1px red solid;
    overflow:hidden;
    height:100px;
    transition:width 1s;
    width:33.333%;
}

.wrap > div:hover {
    width: 70%;
}

Answer 5

如何使用包装器div：

<div class="wrapper">
  <div style="background-color: blue;"></div>
  <div style="background-color: red;"></div>
  <div style="background-color: green;"></div>
  <div style="background-color: purple;"></div>
</div>

然后在css中：

.wrapper div {
  width: 25%;
  height: 100px;
  float: left;
}
.wrapper:hover div {
  width: 12%;
}
.wrapper div:hover {
  width: 64%;
}
.wrapper {
    width: 100%;
}

JSFiddle：here