css - 来自兄弟父 div 的子选择器使用 css 实现悬停效果

Question

我有两个同级 div(父 div)和那些有子 div。如果我将鼠标悬停在 parent1 内的 child2 div 上，我想更改 parent2 div 内的 child4 div 的样式。风格即背景，颜色之类的。我需要将鼠标悬停在这个要求上。我只需要 css，不需要 jquery。

我给出了下面的结构。 child2 在 child1 里面，child1 在 parent1 里面。 child4 在 child3 里面，child3 在 parent2 里面。parent1 和 parent2 是 sibling 。

parent1 > child1 > child2
parent2 > child3 > child4

Answer 1

你 can't go back in the DOM使用纯 CSS，这就是为什么在悬停元素时只能选择子元素、 sibling 和 sibling 的 child 。下面演示了当前可以通过将鼠标悬停在第一个父级上来选择什么:

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