使用严格的CSS选择DIV和该DIV父级之外的另一个DIV

Question

是否有任何方法可以在不使用Javascript的情况下在div之外触发div。我尝试了CSS组合子，但无法使其工作。我不确定是我做错了还是不可能。如果有人知道实现这一目标的方法，我将感谢你的帮助。

.wrapper{
display: flex;
flex-direction: row;
}
.overlay{
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
opacity: 0.5; 
} 
.bottom:hover .overlay, .top:hover .overlay {
bottom: 0;
height: 100%; 
}                   
.top{
position: relative;
width: 200px; 
height: 200px;
margin: 25px 25px 0px 0px;
background-color: black; 
}
.bottom{
height: 200px; 
width: 200px; 
background-color: green;
margin-top: 25px; 
}

<div class="wrapper">
<div class="top">
<div class="overlay"></div>
</div>
<div class="bottom"></div>
</div>

Answer 1

是的，但在一定程度上。在本例中，我可以使用~将鼠标悬停在第一个div上，从而旋转html流中的第二个div。

#one {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
#two {
position: absolute;
right: 10px;
width: 100px;
height: 100px;
background: blue;
}
#one:hover ~ #two{
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to {transform: rotate(360deg)}
}

<div id="one"></div>
<div id="two"></div>

对于您的代码，如果在html中将<bottom>放在<top>之前，则可以将鼠标悬停在绿色上以使覆盖具有动画效果。html

<div class="wrapper">
<div class="bottom"></div>
<div class="top">
<div class="overlay"></div>
</div>
</div>

CSS

.bottom:hover ~ .top .overlay{
bottom: 0;
height: 100%; 
}    

更新：

.wrapper{
display: flex;
flex-direction: row-reverse;
width: min-content;
}
.overlay{
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
opacity: 0.5; 
} 
.bottom:hover ~ .top .overlay{
bottom: 0;
height: 100%; 
}      
.top{
position: relative;
width: 200px; 
height: 200px;
margin: 25px 25px 0px 0px;
background-color: black; 
}
.bottom{
height: 200px; 
width: 200px; 
background-color: green;
margin-top: 25px; 
}

<div class="wrapper">
<div class="bottom"></div>
<div class="top">
<div class="overlay"></div>
</div>
</div>