当 div 悬停时，“i”元素内的 SVG 组件不会改变颜色答案

【问题标题】：An SVG component inside an "i" element doesn't change color when the div is on hover当 div 悬停时，“i”元素内的 SVG 组件不会改变颜色
【发布时间】：2023-01-08 11:09:25
【问题描述】：

我希望“图标”在悬停时变成黄色，就像文本一样，但它只在我输入 .navbar-list-item i:hover 时有效。在这种情况下，它仅在图标本身悬停时才更改颜色，而不是拥有它的 div。

发生这种情况是因为我之前设置了默认颜色。

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>

【问题讨论】：

标签： html css

【解决方案1】：

所以基本上我只需要添加.navbar-list-item:hover i在同一个 CSS sn-p 中，它可以工作。

这是它的样子：

.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;
}

【讨论】：