How to style an element when hovering another?

Question

I know that this can be done when the objects are siblings of eachother or one is a child. But how could one achieve this effect when that is not the case?

Since this couldn't be done via the parent or sibling method (at least as far as I am aware), I turned to the internet but couldn't find any sensible solutions.

<div class="x">
  <div class="y">
    <div class="z">
      <p class="hover-me"></p>
    </div>
  </div>
</div>
<div class="the-hover-should-effect-me"></div>

I expect the code to at the hover of .hover-me make me change .the-hover-should-effect-me, which as they aren't siblings or children I have yet to be to do.

FThompson · Answer 1 · 2019-08-12T22:40:57.633

1

This can't be done with plain CSS, so you'll need to use JavaScript:

let hoverMe = document.querySelector('.hover-me');
hoverMe.addEventListener('mouseenter', () => {
    // apply changes to .the-hover-should-effect-me
});
hoverMe.addEventListener('mouseout', () =>  {
    // revert changes to .the-hover-should-effect-me
});

If you have multiple pairings of .hover-me and .the-hover-should-effect-me then you can perform queries based on a common container that each pairing has.

edited Aug 12 '19 at 22:40

answered Aug 12 '19 at 22:21

FThompson

28,352
13
60
93

No such `hover` Event. – StackSlave Aug 12 '19 at 22:23
I would use `mouseenter`, so there is not a bubbling issue. – StackSlave Aug 12 '19 at 22:40
@StackSlave Good point, fixed it to that. – FThompson Aug 12 '19 at 22:41

score 0 · Answer 2 · answered Aug 12 '19 at 22:24

There isn't a solution as of yet, that allows a child element of parent A, to affect parent B, via a pure CSS solution.

This can be achieved however with javsacript.

const hover = document.querySelector(".hover-me");
const hover_target = document.querySelector(".the-hover-should-effect-me");

hover.addEventListener('mouseover', () => {
    hover_target.textContent ="hi";
})

How to style an element when hovering another?

2 Answers2