如何使用 CSS Hover 覆盖在 javascript 中设置的内联样式？

Question

我在 href 内的元素中使用了一些很棒的字体图标。根据某些条件，必须在 javascript 中设置这些颜色。效果很好，但是在:hover 上，只有 href 文本会改变颜色，即使颜色设置为 !important 在 CSS 中也是如此。 如果我删除 JS 中为图标设置的内联颜色，它可以与 :hover 一起正常工作。

不应该!important覆盖js中设置的内联样式吗？

iconcolor 是我的元素：

<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>

删除 elem.iconcolor 并且不在 JS 中设置任何颜色可以工作，但是我将无法根据条件添加颜色。

还有我的 CSS：

    .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
    /*color: inherit;*/
    text-decoration: none;
    background-color: rgba(0,122,255,255); /*Color on nav items on hover */
    background-image: none;
    color: white !important;
}

我正在使用 bootstrap 2.3.2。

完整的html结构：

/* 


    #embeda013f208-3363-a68f-3b07-1a1824410343_0 ul.nav li.dropdown > ul.dropdown-menu

    set to display:block when editing in browser, to see changes instantly. 

*/


#navigationDiv {
    /*margin-top: 46px;*/
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 46px;
    font-family: inherit;
    font-weight: 300;
}

.navbar-inner {
    box-shadow: none;
    border-radius: 0px;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

ul.nav li.dropdown > ul.dropdown-menu {
    display: none;
}

navbar sticky-top navbar-light bg-light {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 46px;
}

/*#novobarcontainer{
    position:absolute;
    top:0px;
    left:0px;
}*/

.navbar {
    margin-bottom: 20px;
    overflow: visible;
    position: fixed;
    top: 46px;
    left: 0px;
    width: 100%;
    z-index: 1;
}


.dropdown-menu > li > a {
    border-bottom: none;
    padding: 7px 20px;
}

.dropdown-menu {
    box-shadow: none;
    border-radius: 0;
    padding: 0px 0px 0px 0px;
}

    .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
        color: inherit;
        text-decoration: none;
        background-color: rgba(0,122,255,255); /*Color on nav items on hover */
        background-image: none;
        color: white;
    }

.dropdown-submenu > .dropdown-menu {
    border-radius: 0;
    margin-top: 0px;
    margin-left: 1px;
}

/*This is the color on the small arrow on the submenu*/
.dropdown-submenu > a:after {
    border-left-color: black;
}

    .dropdown-submenu > a:after:hover {
        border-left-color: white;
    }


/* change color on hover root element*/
.navbar .nav > li > a {
    color: black;
    text-shadow: none;
}


    .navbar .nav > li > a:hover {
        color: white;
        background-color: rgba(0,122,255,255);
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/regular.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<div id="navigationDiv" class="navbar-inner"><ul class="nav navbar-nav" id="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#undergrad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>UnderGrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#art.undergrad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#classic.art.undergrad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>classic.art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hey"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>hey </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul></div>

Answer 1

:hover 将始终覆盖元素样式。在 css 中设置 a:hover { color: inherit; }; 以覆盖 font-awesomes css 应该可以解决问题。