Select DIV 与 DIV 之外的另一个 DIV 父级严格使用 CSS

Question

有什么方法可以在 div 之外触发 div 而无需使用 Javascript。我尝试了 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>

对于您的代码，如果您将 <bottom> 放在 html 中的 <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>

Select DIV 与 DIV 之外的另一个 DIV 父级严格使用 CSS

Select DIV with another DIV that is outside that DIVs Parent using strictly CSS

html

css

css-selectors