当 div 在 hover 上时，“i”元素内的 SVG 组件不会改变颜色

Question

I want the "icons" to turn yellow on hover just like the text but it only worked when i put .navbar-list-item i:hover . In that case it changes the color ONLY when the icon itself is on hover, not the div that has it.

It happens because I have a default color set earlier.

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>

Answer 1

So basically I just had to add .navbar-list-item:hover i in the same CSS snippet and it works.

Here's what it looks like:

.navbar-list-item:hover, .navbar-list-item:hover i{
    background-color: rgb(0, 0, 0);
    color: #F3D63B;
    transition: color 0.1s, background-color 0.3s;
}