childrens selectors from sibling parent divs using

问题:

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.

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

回答1:

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>