Is there a way to make the "icons" change color to yellow when hovered over, similar to the text? I tried using .navbar-list-item i:hover, but it only works when the icon itself is hovered over, not the div that contains it.
This issue arises due to a previously set default color.
CSS:
.navbar-list-item:hover{
background-color: rgb(0, 0, 0);
color: #F3D63B;
transition: color 0.1s, background-color 0.3s;
}
HTML:
<nav class="navbar">
<ul class="navbar-list">
<a href="/">
<li class="navbar-list-item">
<i class="fa-solid fa-lemon"></i>
</li>
</a>
<li class="navbar-list-item">Item 1</li>
<li class="navbar-list-item">Item 2</li>
<li class="navbar-list-item">Item 3</li>
<li class="navbar-list-item">
<i class="fa-solid fa-cart-shopping"></i>
</li>
</ul>
</nav>