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

【问题标题】：childrens selectors from sibling parent divs using css for hover effect来自兄弟父 div 的子选择器，使用 css 实现悬停效果
【发布时间】：2017-07-28 01:21:53
【问题描述】：

我有两个兄弟 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

【问题讨论】：

你能分享一些代码吗？
你不能单独使用 CSS 来做到这一点。您需要使用 javascript。唯一可以用 CSS 做的事情是，如果您将鼠标悬停在 parent1 上，您可以更改 parent2 中 child4 的样式。

标签： css css-selectors

【解决方案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>

【讨论】：