0

Elements A and B are next to each other in the same parent element. Now I want that when I hover over element B, element A is also affected.

        .child-a,
        .child-b {
            height: 200px;
            width: 200px;
        }

        .child-a {
            background-color: brown;
        }

        .child-b {
            background-color: blue;
        }

        .parent .child-b:hover, /* Works */
        .parent .child-b:hover + .child-a { /* Doesn't work*/
            background-color: black;
        }

    <div class="parent">
        <div class="child-a"> /* should be affected when i hover on element B*/
            A
        </div>
        <div class="child-b">
            B
        </div>
    </div>
Parry Hotter
  • 13
  • 2
  • Perhaps some solutions in this [question](https://stackoverflow.com/q/1817792/20436957) could be helpful. – John Li Dec 04 '22 at 19:36

1 Answers1

0

In a future world, you could use the CSS :hasselector to check whether the parent element has a hovered element like this: .parent:has(.child-b:hover) .child-a

Unfortunately, this is currently still unsupported in Firefox without a flag, so the only other way you could use is by checking whether the user hovers over the parent element with .parent:hover and then check whether the child a is also hovered, like this: .parent:hover .child-a:not(:hover). Now, the hover effect would only apply if you're hovering over the parent element or the child-b element, but not over the child-a element.

tobimori
  • 527
  • 2
  • 12