i元素内SVG图标在父列表项hover时不变色的问题排查

问题说明 #

当鼠标悬停在.navbar-list-item上时，希望其中的<i>图标和文字一同变为黄色#F3D63B，但目前仅文字变色，图标无变化。原因是图标被提前设置了默认颜色，父元素的color属性无法覆盖它。

解决方案 #

修改CSS，在列表项hover状态下，明确指定内部<i>元素的颜色：

.navbar-list-item:hover{
    background-color: rgb(0, 0, 0);
    color: #F3D63B;
    transition: color 0.1s, background-color 0.3s;
}
/* 新增规则，强制设置hover状态下图标的颜色 */
.navbar-list-item:hover i{
    color: #F3D63B;
}

原理说明 #

Font Awesome这类图标通常会自带默认颜色样式，优先级高于父元素继承的color属性。通过.navbar-list-item:hover i选择器，直接给hover状态下的图标元素设置颜色，就能强制覆盖原有样式，实现图标与文字同步变色的效果。

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