javascript - 如何CSS嵌套div来影响外部外部div？

Question

我想让子 div 影响外部 div，我希望 box1 将中间 div box2 bg 更改为其他东西，如果没有脚本我怎么能做到这一点我试过但失败了 #box:hover ~ #box2 也以“+”失败

<div class="father">  
       <div class="child2">
                <div id="box1" class="child3"> hover here </div>
       </div>  

 </div>                



<div id="box2" class="father2"> change this background </div>


<div class="father">
       <div class="child2">
                <div id="box1" class="child3"> hover here </div>
       </div>  

 </div>     

Answer 1

这个答案更多的是出于好奇，而不是真正的解决方案。

如果您的嵌套框位于流程前面的 div 内，您希望看到正在更新的背景的框，您可以使用 pointer-events 来控制对悬停使用react的区域。

---

提醒:CS​​S 选择器只能向下导航 DOM 树，向上爬是不可能的。

DEMO

---

基本 CSS 将是:

div {
  pointer-events:none;
}
div #box1 {
  pointer-events:auto;
}
div:hover + div {
  background:red;
}

对于:

<div class="father">  
  <div class="child2">
    <div id="box1" class="child3"> hover here </div>
  </div>  
</div>                
<div id="box2" class="father2"> 
  change this background 
</div>