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

概述我有4个部门如下： 在悬停第一个元素时,它变为： 即我在使用’〜’选择器悬停第一个元素时改变了下一个元素的CSS. /* hover on 1 */#pillar1:hover {width: 64%;}#pillar1:hover ~ #pillar2{width: 12%;}#pillar1:hover ~ #pillar3{width: 12%;}#pillar1:hov 我有4个部门如下：

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

即我在使用’〜’选择器悬停第一个元素时改变了下一个元素的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 ><div ID="pillar1"></div>    <div ID="pillar2"></div><div ID="pillar3"></div><div ID="pillar4"></div></section>

我怎样才能做到这一点？

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

display: flex;

Demo

HTML

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

总结

以上是内存溢出为你收集整理的html – 使用纯CSS创建水平可折叠手风琴全部内容，希望文章能够帮你解决html – 使用纯CSS创建水平可折叠手风琴所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。