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来控制将对悬停做出反应的区域。

Remenber：CSS选择器只能在DOM树中向下导航，无法攀爬。

<强> DEMO

基本CSS将是：

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

for：

<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>

Answer 2

首先，如果您不想使用脚本，请不要使用javascript或jquery标记...

你不能拥有两个具有相同ID的div（或任何东西），如果你想让两个东西使用类，那么它们是否相同并不重要。只使用第一个（我认为，它可能是最后一个......），其他的被忽略。

回答问题

+组合器仅适用于兄弟姐妹，即它们必须在同一个div中，而不是嵌套在任何其他div中，并且它们必须一个接一个地直接进行，因此.father:hover + .father2仅适用于第一个div。如果~和+之间存在其他元素，则可以使用.father代替.father2。

所以这部分地回答了这个问题，我不知道如何让第二个问题起作用。

Try this question for additional help

如何Css嵌套div来影响外部外部div？

2 个答案:

回答问题