← All elements
<ul class="dl"><li><a>Overview</a></li><li><a>Components</a></li><li><a>Playground</a></li><li><a>Guides</a></li></ul>About this hover effect
Hover one link in a list and all the others fade back, so the focused item stands out. Written with :has().
How it works
The :has selector checks whether any link inside the list is hovered, and if so fades every other link to 25 percent opacity. The hovered one gets an accent colour and slides right a little, so one item stands out.
Ways to customise it
- Change .25 for more or less dimming.
- Replace the orange with your accent.
- Increase the translate for more movement.
Good to know
Dimmed text must still be legible if it is important, so keep the lowest opacity above comfortable contrast or use it only for decorative lists. Focus states should be added with :focus-visible too.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.