Go to homepage

Projects /

May 18, 2020

Styling siblings on hover

By CodyHouse
404 HTML, CSS, JS components. Download →

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.

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

Here's an example:

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.