如何使用CSS :hover覆盖JavaScript为Font Awesome图标设置的内联样式

• 你编写的hover规则选择器，仅匹配<a>标签本身，为a元素设置带!important的白色color属性，该样式的作用范围仅为a元素自身。
• Font Awesome图标是独立的<i>元素，自身带有JS动态设置的内联color属性，属于直接作用在i元素上的样式。
• CSS继承规则下，从父元素继承得到的属性优先级为最低层级：无论父元素的样式是否带有!important，子元素自身直接设置的样式，优先级永远高于从父元素继承的样式。
• 移除i的内联颜色后，i没有自身直接定义的color属性，会自动继承a的颜色，此时hover样式即可正常生效。

方案1：仅修改CSS，完全保留现有JS逻辑 #

直接扩展现有hover选择器的匹配范围，让a的hover状态同时覆盖内部的i元素，给i也设置带!important的白色，即可让hover时的样式直接作用在i上，覆盖自身的内联颜色。
需要补充/修改的CSS：

/* 原有a标签的hover规则保持不变 */
.dropdown-menu > li > a:focus, 
.dropdown-menu > li > a:hover, 
.dropdown-submenu:focus > a, 
.dropdown-submenu:hover > a {
    text-decoration: none;
    background-color: rgba(0,122,255,255);
    background-image: none;
    color: white !important;
}

/* 新增匹配a内部i元素的hover规则 */
.dropdown-menu > li > a:focus > i,
.dropdown-menu > li > a:hover > i,
.dropdown-submenu:focus > a > i,
.dropdown-submenu:hover > a > i,
.navbar .nav > li > a:hover > i {
    color: white !important;
}

该方案无需改动JS的动态颜色赋值逻辑，直接补全CSS即可生效。

方案2：基于CSS自定义属性实现，减少冗余!important #

如果不想堆叠!important声明，可以用CSS变量实现动态颜色的逻辑，同时兼容hover状态的样式切换：

1. 修改JS逻辑：原给i设置内联color的代码，改为设置i的CSS自定义属性，例如：

   // 原代码：iconEl.style.color = 动态业务色值
   // 修改后：
   iconEl.style.setProperty('--dynamic-icon-color', 动态业务色值)
   

2. 新增i元素的基础样式，使用上述自定义属性作为默认颜色：

   .fas {
     color: var(--dynamic-icon-color, inherit);
   }
   

3. 在所有hover规则中，将自定义属性的值覆盖为白色：

   .dropdown-menu > li > a:hover,
   .navbar .nav > li > a:hover {
     --dynamic-icon-color: white;
   }
   

该方案样式优先级更清晰，后续维护时不需要反复调整!important的层级。

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