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 !
