兄弟姐妹div的儿童选择器，使用css进行悬停效果 [英] childrens selectors from sibling parent divs using css for hover effect

问题描述

我有两个兄弟div(父div)，而那些有子div.如果将鼠标悬停在parent1内的child2 div上，我想更改parent2 div内child4 div的样式.风格，即背景，颜色像任何东西.我需要将鼠标悬停在此要求上.我只需要css，不需要jquery.

I have two sibling divs(parent divs) and those have child divs. If I mouse hover on the child2 div inside parent1, I wanted to change the style of child4 div inside the parent2 div. style i.e. background,color like anything. I need mouse over effect on this requirement. I need only with css, without jquery.

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

I given the structure below. child2 is inside child1 and child1 is inside parent1. child4 is inside child3 and child3 is inside parent2. parent1 and parent2 those are siblings.

parent1 > child1 > child2
parent2 > child3 > child4

推荐答案

您无法返回DOM 使用纯CSS，这就是为什么在悬停元素时只能选择子级，同级和同级子级的原因.下面演示了通过悬停第一个父对象当前可以选择的内容:

You can't go back in the DOM with pure CSS, that is why it is only possible to select childs, siblings and childs of siblings when hovering an element. The following demonstrates what currently can be selected by hovering the first parent:

#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进行悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！