How to effect Parent background while Hover in the child

Question

im trying to change the background a siblings div while hovering on the child that exist inside the parent

<div class="parent-container">

  <div class="child-container-upper">
  </div>

 <div class="child-container-bottom">
  </div>

</div>

im able to change the background of my bottom-container > upper-container

  .child-container-upper {
    &:hover {
    ~.child-container-bottom{background:purple}
    }
   }

I want while hovering on the bottom-container to effect to upper but it dosent seem to work.

Suggestions?

you might wanna check this https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector — Damzaky, Nov 14 '22 at 12:13
If those two child elements _completely_ fill the parent element, then you can implement a hack that makes use of the hover event on the parent as well. — CBroe, Nov 14 '22 at 12:24

score 0 · Answer 1 · answered Nov 14 '22 at 15:20

In the very simple case that you describe then it can be done by sensing when the parent is hovered on and the relevant child is not.

This snippet uses the CSS :not pseudo class to achieve this.

.parent-container:hover .child-container-upper:not(:hover) {
  background: red;
}

.parent-container:hover .child-container-bottom:not(:hover) {
  background: green;
}

<div class="parent-container">

  <div class="child-container-upper">upper
  </div>

  <div class="child-container-bottom">bottom
  </div>

</div>

How to effect Parent background while Hover in the child

1 Answers1