How to style the parent element when hovering a child element?

css

responsive-design

best-practices

pointer-events

byAnton Shumikhin·Feb 22, 2025

In short, CSS alone won't do the trick. Instead, we need a bit of JavaScript magic to toggle a class on the parent when a child is hovered over. Here's a quick example:

// The magician announces: "Hovered class, appear!" 
document.querySelector('.child').addEventListener('mouseenter', function() {
    this.parentElement.classList.add('hovered');
});
// ...Now disappear!
document.querySelector('.child').addEventListener('mouseleave', function() {
    this.parentElement.classList.remove('hovered');
});

Work in tandem with CSS:

.hovered {
    /* Parent glam-up when child is showing off  */
    border: 2px solid blue;
}

When the child dons the hover mantle, we magically cloak the parent with .hovered, and promptly remove it when the grand exit happens.

Pioneering with advanced CSS selectors

While JavaScript is a proven ally, the world of CSS has evolved. Let's journey together exploring the uncharted terrains of modern CSS selectors:

Cast `:has` pseudo-class to our service

The :has pseudo-class can be the faithful squire in your CSS knight-ship. It styles the parent based on a brave child's state:

parent:has(> child:hover) {
    /* The parent stands proud! */
    background-color: lightblue;
}

Remember, our squire :has has yet to pledge loyalty to all browsers, notably Firefox. Always consider browser compatibility in your quests.

Alliance with sibling selectors and their trusty steed, absolute positioning

Sometimes, siblings of our focal child come to our rescue. Let's explore:

.parent {
    position: relative;
}
.sibling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Is it a ghost? */
}
.child:hover + .sibling {
    /* The brave sib that wears parent's armor */
    border: 2px dashed red;
}

This involves Deploying Ahead (+) or Deploy in General (~) sibling selectors to our aid. An excellent tactic in complicated family feuds!

Invoke the cascade

The cascading nature of CSS is our army. Indirectly style the parent and win battles beautifully:

.child:hover {
    /* Child: "Look, I can hover!" */
}

.child:hover ~ .sibling {
    /* Sibling to child: "Dude, you made our parent rock!" */
}

Not directly styling the parent, yet crafts a unique visual narrative. Tactics over brute force, right?

Managing pointer events and creating interactivity

Ensure the superhero-child is the only interactive element, and the parent city doesn’t stand in the way with pointer-events: none.

.parent {
    pointer-events: none; // City: "Go on hero, save the day. I won't come in your way!"
}
.child {
    pointer-events: auto; // Hero: "On it!"
}

Whole hover affair is handled only by the child granting accurate control over parent styling changes.

Comprehending through code demos

A live demo often alleviates confusion:

CodePen Sample: Code snippets of sibling selector technique for a clearer picture.
JSFiddle Example: A hands-on demo that exhibits manipulation of parent's appearance upon a child's hover.

Crafting interactive user experiences

Enhance your UI with dynamic hover effects using CSS pseudo-classes like :hover, :focus, and other siblings. Though one must recall the challenges in direct parent-child style manipulation on hover.

explain-codes / Css / How to style the parent element when hovering a child element?

Linked

Apply style to parent if it has child with CSS



Why does .class:last-of-type not work as I expect?



How to remove only underline from a:before?



Select first occurring element after another element



How to affect other elements when one element is hovered

