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

Question

I'm using some font awesome icons in an element inside a href. The color of these has to be set in javascript, based on some conditions. Which works fine, BUT on :hover only the href text changes color, even though the color is set to.important in CSS. If I remove the inline color set in JS for the icons it works fine with :hover .

Shouldn't?important override the inline style set in js?

My element where iconcolor is the issue:

<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>

Removing the elem.iconcolor and not setting any color in JS works, but then again I won't be able to add color on conditions.

And my 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;
}

I'm using bootstrap 2.3.2 on top of this.

Full html structure:

 /* #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 will always overwrite element styling. Setting a:hover { color: inherit; }; a:hover { color: inherit; }; in css to overwrite font-awesomes css should do the trick.