/
๐Ÿ’„

Styling siblings on hover

https://codyhouse.co/nuggets/styling-siblings-on-hover
css

Use the :not CSS selector to stylize siblings on hover.

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.

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

See the Pen CSS Nugget: Styling siblings on hover by CodyHouse (@codyhouse) on CodePen.

Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.