I wanted to add a special effect to my navigation list items: When the mouse hovers over the anchor tags of the list items (or even in the active state), I wanted the image in the <span> to be replaced with a colored version of the image. The color of the text and the color of the icon should change together.
The code that I tried using is provided below, but unfortunately, it did not work as expected. Here's an example showcasing the desired result vs. the actual result:
Desired Result: https://i.sstatic.net/NCTkd.jpg
Actual Result: https://i.sstatic.net/yMRQe.jpg
nav ul li a:hover,
.active {
color: #3B94D9;
}
nav ul li:hover {
border-bottom: 2px color #3B94D9;
}
span {
margin-right: 4px;
margin-top: 10px;
}
span#home {
width: 20px;
height: 18px;
background: url('../img/home.png') no-repeat;
display: inline-block;
vertical-align: bottom
}
span#home:hover {
background: url('../img/home-hover.png') no-repeat;
}
span#notif {
width: 20px;
height: 18px;
background: url('../img/bell.png') no-repeat;
display: inline-block;
vertical-align: bottom
}
span#notif:hover {
background: url('../img/bell-hover.png') no-repeat;
}
span#msg {
width: 20px;
height: 18px;
background: url('../img/messages.png') no-repeat;
display: inline-block;
vertical-align: bottom
}
span#msg:hover {
background: url('../img/messages-hover.png') no-repeat;
}<nav>
<ul>
<li><a href="#" class="active"><span id="home"></span> Home</a></li>
<li><a href="#"><span id="notif"></span>Notifications</a></li>
<li><a href="#"><span id="msg"></span>Messages</a></li>
</ul>
</nav>