Hover on Child effect the brother

Question

Ive been searching for a way for the child in this code to affect the brother on hover and cant seem to get it work.

<body>
    <div id="parent">
      <div id="child"></div>
    </div>
    <div id="brother"></div>
</body>

Ive tried the following css and it does not work

#child:hover + #parent #brother{
backgroundcolor: red;
}

Is it even possible to affect the brother while hovering on a child? It already is a little bit complicated doing a child to parent hover.

score 0 · Answer 1 · answered Mar 13 '23 at 20:44

It is possible for those browsers that have implemented the CSS :has

Note that at present Firefox only implements this behind a flag but many other major browsers have implemented it.

#parent:has(#child:hover)~#brother {
  background-color: red;
}

#child:hover+#parent #brother {
  backgroundcolor: red;
}

<body>
  <div id="parent">parent
    <div id="child">child</div>
  </div>
  <div id="brother">brother</div>
</body>

1 Answers1