如何用 CSS Hover 覆蓋在 javascript 中設置的內聯樣式？

Question

我在 href 內的元素中使用了一些很棒的字體圖標。 根據某些條件，這些顏色必須在 javascript 中設置。 效果很好，但是在:hover上只有 href 文本會改變顏色，即使顏色在 CSS 中設置為 .important 也是如此。 如果我刪除 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;
}

我在此之上使用引導程序 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 將始終覆蓋元素樣式。 設置a:hover { color: inherit; }; a:hover { color: inherit; }; 在 css 中覆蓋 font-awesomes css 應該可以解決問題。