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 !

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Categorized in:

Tagged in: