Question

我有两个兄弟div（父div）和那些有子div。如果我将鼠标悬停在parent1内的child2 div上，我想在parent2 div中更改child4 div的样式。风格，即背景，颜色像任何东西。我需要鼠标覆盖这个要求。我只需要使用css，而不需要jquery。

我给出了下面的结构。 child2在child1中，child1在parent1中。 child4在child3中，child3在parent2中。 parent1和parent2是兄弟姐妹。

parent1 > child1 > child2
parent2 > child3 > child4

Answer 1

你can't go back in the DOM使用纯CSS，这就是为什么在悬停元素时只能选择兄弟姐妹的孩子，兄弟姐妹和孩子。以下内容演示了当前可以通过悬停第一个父级来选择的内容：

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

来自兄弟姐妹div的儿童选择器使用css进行悬停效果

1 个答案: