侧边栏<li>元素hover效果异常：图标未同步触发hover效果求助

你的问题核心在于：<li>的hover样式仅作用于自身文本，但图标嵌套在<a>标签内部，<a>标签或图标类自带的样式优先级更高，不会自动继承<li>的hover状态颜色。

解决方案 #

修改CSS，在<li>触发hover时，同时指定内部<a>标签和图标的样式：

.wrapper .sidebar ul li:hover{
    background-color: #064E88;
    color: white;
}

/* 新增样式，让图标与<li>同步hover效果 */
.wrapper .sidebar ul li:hover a,
.wrapper .sidebar ul li:hover a i{
    color: white;
}

完整CSS代码 #

.wrapper {
    display: flex;
    position: relative;    
}

.wrapper .sidebar{
    position: fixed;
    width: 200px;
    background-color: #00B6E1;
    height: 100%;
}

.wrapper .sidebar ul li{
    padding: 15px;
    border-bottom: 1px solid #064E88;
    font-weight: 400;
}

.wrapper .sidebar ul li a{
    padding: 10px;
}

.wrapper .sidebar ul li:hover{
    background-color: #064E88;
    color: white;
}

/* 确保图标同步变色 */
.wrapper .sidebar ul li:hover a,
.wrapper .sidebar ul li:hover a i{
    color: white;
}

原理说明 #

• <a>标签默认有独立的文本颜色样式，优先级高于父元素<li>的颜色设置，因此即使<li>hover时设置了color:white，<a>内部的图标也不会自动变色。
• 通过li:hover a和li:hover a i选择器，直接指定hover状态下<a>和图标的颜色，强制覆盖原有样式，实现与<li>的hover效果同步。

内容的提问来源于stack exchange，提问作者Abhinav