Skip to main content

Our Surprisingly Simple Navigation Hover Effect

By Tyler Sticka

Published on January 26th, 2023

Topics

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.

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.