DEV Community

Cover image for Styling siblings on hover in CSS
Sebastiano Guerriero for CodyHouse

Posted on

Styling siblings on hover in CSS

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
Sebastiano Guerriero Author

indeed it is :)