Our Surprisingly Simple Navigation Hover Effect

Programming - Apr 19, 2024

We recently made some changes to our site, but there’s a navigation effect we’re fond of that stuck around.

When you hover over a link on larger screens, all the adjacent links fade to a lower opacity:

We didn’t invent this effect (it’s a vintage CSS trick), but we’re asked about it often enough that I thought I’d share how it works.

Here’s the relevant CSS:

.nav:hover .nav-item:not(:hover) {
  opacity: 0.65;
}Code language: CSS (css)

The selector does the heavy lifting here: When any part of the navigation is hovered, we lower the opacity of any navigation items that aren’t being hovered.

That’s really all there is to it! CSS is so great.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More