来自兄弟姐妹父母的儿童选择者使用CSS来悬停效应

Question

我有两个兄弟姐妹divs（parentdivs），而这些divs（父母divs）。如果我鼠标鼠标悬停在父parent1内的child2div上，我想更改parent2div内的child4div的样式。风格，即背景，颜色像任何东西一样。我需要鼠标对此要求进行超越。我只需要CSS，而没有jQuery。

我给出了下面的结构。Child2在Child1内部，而Child1在Parent1内部。Child4在Child3内部，Child3在Parent2内。parent1和parent2那是兄弟姐妹。

parent1 > child1 > child2
parent2 > child3 > child4

Answer 1

您不能用纯CSS返回DOM中，这就是为什么只有在悬停元素时只能选择兄弟姐妹的孩子，兄弟姐妹和孩子的原因。以下说明了通过悬停第一个父的当前可以选择的内容：

#parent1:hover > div {
  color: blue;
}
#parent1:hover > div > div {
  color: purple;
}
#parent1:hover ~ div {
  color: red;
}
#parent1:hover ~ div > div {
  color: orange;
}
#parent1:hover ~ div > div > div {
  color: green;
}
#parent1 {
  border: 1px solid blue;
}
div {
  margin: 5px 0;
}
div > div {
  margin-left: 15px;
}

<div id="parent1">
  Parent1 (target)
  <div>Child1
    <div>Child2</div>
  </div>
</div>
<div>
  Parent2
  <div>Child1
    <div>Child2</div>
  </div>
</div>