在其他兄弟元素上展开并覆盖div

Question

我如何实现一个输入字段:在悬停时，它扩展到其他兄弟元素(具有相同的父元素)?
例如:

.grandparent{
display: flex;
justify-content: space-between;
width:100%;
height:5rem;
}
.other{
background-color: #7fffd477;
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
}
.parent{
background-color: #fff67f;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 12px;
}
.child-1{
background-color: #ff7f7f;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 60%;
}
.child-2{
background-color: #77ab55;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 5rem;
}
.child-2:hover{
width: 100%;
transition: all 0.5s;
}

<div class="grandparent">
<div class="parent"> 
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
<div class="child-2">
2.0
</div>
</div>
<div class="other">
other
</div>
</div>

我想要"child-2"Div扩展为整体"parent"(黄色)div和覆盖其他兄弟元素，当我悬停在它。
谁能帮我通过CSS实现这个?

Answer 1

对于父元素中最右边的元素，要在不影响其兄弟元素的情况下展开，它需要被绝对定位并"锚定"在父元素的右侧，以便宽度可以向左侧增长。

对于问题中给出的简单HTML结构，其中只有一个可扩展元素的兄弟元素，这将有可能实现所需的布局，而无需更改HTML，但从父元素中删除flex。

然而，这个问题提到了"兄弟姐妹"，因此需要在所有子元素之间使用相等的间距来布局父元素。

这个代码片段通过在child-2中添加一个div来实现这一点。Child-2保持其给定的宽度，因此参与父节点的伸缩计算。

但是，内部div将被定位为绝对并向左展开。

为了使定位和尺寸正确，将child-2的5rem宽度和parent的12px填充设置为CSS变量，并使用CSS calc。如果需要，这样可以更容易地更改这些设置。

为了显示增加的通用性，这个代码片段有2个同级(每个用于演示设置为child-1设置，宽度为30%而不是60%)。

.grandparent {
display: flex;
justify-content: space-between;
width: 100%;
height: 5rem;
}
.other {
background-color: #7fffd477;
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
}
.parent {
--pad: 12px;
/* set to the width of the parent's padding */
background-color: #fff67f;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: var(--pad);
position: relative;
}
.child-1 {
background-color: #ff7f7f;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 60%;
width: 30%;
}
.child-2 {
--w: 5rem;
/* the width of the rightmost element in parent */
height: 100%;
width: var(--w);
right: 0;
}
.child-2>* {
position: absolute;
background-color: #77ab55;
display: flex;
align-items: center;
justify-content: center;
width: var(--w);
height: calc(100% - (2 * var(--pad)));
transition: all 0.5s;
right: var(--pad);
}
.child-2:hover>* {
width: calc(100% - (2 * var(--pad)));
}

<div class="grandparent">
<div class="parent">
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
<div class="child-2">
<div>
2.0
</div>
</div>
</div>
<div class="other">
other
</div>
</div>

Answer 2

我已经调整了HTML结构:.child-1现在在.child-2之后。.parent的CSS现在包括flex-direction: row-reverse。

现在可以很容易地通过CSS(display: none)影响.child-1。

.grandparent {
display: flex;
justify-content: space-between;
width: 100%;
height: 5rem;
}
.other {
background-color: #7fffd477;
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
}
.parent {
background-color: #fff67f;
display: flex;
justify-content: space-between;
flex-direction: row-reverse; /* Added */
align-items: center;
width: 100%;
padding: 12px;
}
.child-1 {
background-color: #ff7f7f;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 60%;
}
.child-2 {
background-color: #77ab55;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 5rem;
}
.child-2:hover {
width: 100%;
transition: all 0.5s;
z-index: 10;
}

/* Added */
.child-2:hover+.child-1 {
display: none;
}

<div class="grandparent">
<div class="parent">
<div class="child-2">
2.0
</div>
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
</div>
<div class="other">
other
</div>
</div>