Spotlight effect in the navigation with CSS only

For today I have a really really small article with a neat CSS trick. When you hover over the navigation and you would like to give a spotlight effect to the hovered item while the rest of the items immerse in the darkness, then you need to apply the following CSS code:

body {
  background: #333;
}  
ul {
  display: flex;
  list-style: none;
}
li {
  padding: 0 10px;

}
li a {
  text-decoration: none;
  color: #fff;
  transition: color .4s;
}

ul:hover a  {
   color: #6d6d6d;
}
ul a:hover  {
   color: #fff
}

The trick is simple. You add the mouse over listener to the entire list(ul) and apply to all <a> items inside of it a dark color and then set another mouse over listener for the <a> items and apply a light color for the hovered element. This rule will override the previous one that was applied when hovering the entire list. That’s it. Enjoy !

0