DEV Community

loading...
Cover image for Styling siblings on hover in CSS
CodyHouse

Styling siblings on hover in CSS

Sebastiano Guerriero
UX/UI designer, creating stuff at CodyHouse.
・1 min read

Normally, you would need JavaScript to stylize all the siblings of an element you're interacting with. But wait! There's a cool method based 100% on CSS.

The idea, in short, is to target the :hover of the parent, then target all the children except the one you're hovering over.

.parent:hover .child:not(:hover) {
  /* this style affects all the children except the one you're hovering over */
}

Here's an example:

Originally published at CodyHouse.co

Discussion (2)

Collapse
bayuangora profile image
Bayu Angora

This is great for menu on header and footer.

Collapse
guerriero_se profile image
Forem Open with the Forem app