CSS: select all siblings using not()

Our UX team wanted me to create a navigation menu that dims the rest of the items instead of highlighting the hovered item.

CSS to the rescue!

The solution is quite simple when using the CSS not() pseudo-class:

The HTML

<div class="menu-items"> <div>Home</div> <div>About</div> <div>Contact</div> <div>Services</div> <div>Blog</div> <div>Portfolio</div> </div> 

The SCSS

I've removed the styling properties so we can focus on the actual functionality:

1 .menu-items { 2 visibility: hidden; 3 4 & > * { 5 visibility: visible; 6 transition: opacity 500ms; 7 } 8 9 &:hover > :not(:hover) { 10 opacity: 0.45; 11 } 12 } 

We have a container with a .menu-items class.
In line #4, we're selecting all its child elements and adding an opacity animation transition to them.

Line #9 handles the hover effect on elements by setting the opacity of all non-hovered elements using the not() pseudo-class to a lower value.

And what's going on with the visibility property?
We're setting the visibility of the .menu-items container to hidden and then setting the child elements back to visible. This causes the effect to turn off when we hover between the elements.

That's it :)