gpt4 book ai didi

html - 如何修复div在html中没有正确收缩

转载 作者:行者123 更新时间:2023-11-28 14:05:04 24 4
gpt4 key购买 nike

<分区>

我在 flexbox 中有 3 个 div,当光标悬停在其中一个上时,一个展开,另外两个缩小。当我将光标悬停在一个上时,它会展开,但其他的不会正确收缩(如果我将鼠标悬停在第一个上,它们都会收缩,但当我将鼠标悬停在第二个或第三个上时,它们不会收缩)

body {
display: flex;
flex-direction: row;
}

div {
width: 250px;
height: 100px;
background-color: black;
margin: 10px;
transition: width 0.1s ease-in-out;
}
.e1:hover { width: 500px; }
.e1:hover ~ .e2 { width: 100px; }
.e1:hover ~ .e3 { width: 100px; }
.e2:hover { width: 500px; }
.e2:hover ~ .e1 { width: 100px; }
.e2:hover ~ .e3 { width: 100px; }
.e3:hover { width: 500px; }
.e3:hover ~ .e1 { width: 100px; }
.e3:hover ~ .e2 { width: 100px; }
<body>
<div class="e3">
<p> </p>
</div>
<div class="e2">
<p> </p>
</div>
<div class="e3">
<p> </p>
</div>
</body>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com