Our Surprisingly Simple Navigation Hover Effect

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.