Effect All Siblings on Hover With CSS

Effect All Siblings on Hover With CSS

Some simple CSS to highlight a hovered item in a list by altering the style of all other items that aren’t being hovered. This specific example shows how hovering any child will set all other children to 10% opacity.

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
8.30.22

Similar items

Items
2798
Search

Fix Overflow Hidden and Border Radius Mobile Bug

1.2.23

Custom Text Underline Offset, Size and Color

2.19.22

CSS Halftone Overlay Effect

9.20.21

Finsweet Normalize CSS Embed

9.2.21

Prefers Reduced Motion Media Query

7.28.21

Restock

View Restock

Multi-line Truncate

4.4.21

Set Equal Heights Based on Tallest

1.11.21

Superscript All Registered(®) Trademark Characters

7.13.20

Webflow Lightbox Custom Overlay Color

2.28.20

Custom Scrollbar

2.27.20

Text Bottom Border Animation on Hover

2.5.20

Resetting Apple Default Form Styles

12.4.19

Customizing Text Selection Color

12.4.19

Single Line Truncate

12.4.19

@Media Prefers Dark/Light

11.21.19

CSS Aspect-Ratio

11.21.19

CSS Scroll Snap

11.21.19

Hide Section if Child CMS Collection is Empty in Webflow

4.2.24

Show a Preloader Only Once Per Day

1.3.24

Randomize Button Text on Click

1.12.23

Get Image Size w/ Airtable Script

10.10.22

Simple Countdown to Date/Time

10.6.22

CSS Logo Marquee / Ticker

5.25.22

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.

Subscribe