css - Bootstrap 背景颜色在事件时发生变化

Question

以下是我的导航栏代码，带有一个名为 find agents 的导航栏链接:

 <nav id="nav" class="navbar bg-navyblue navbar-static-top" role="navigation" style="margin-bottom: 0" tabindex="-2">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <ul class="nav navbar-top-links navbar-left inpage-links">
            <li class="find-agent-btn"><a href="#" class="fa fa-search-plus"> Find Agents <span class="caret"></span></a></li>
        </ul>
 </nav>

这是它的CSS:

ul.inpage-links li a:hover, ul.inpage-links li a:active{
        background-color: #246B80;
        color: #fff;
        opacity: .8;
}

问题是当我单击链接并从中移除鼠标时，灰色的默认 Bootstrap 颜色会覆盖我的事件类 css。

here是我的作品的图片，以便更清楚地说明。

Answer 1

你已经更改了类，所以更新了 css，所以两种类型的 html 都可以工作

ul.inpage-links li a:hover, ul.inpage-links li a:active,ul.inpage-links li a:focus{
        background-color: #246B80;
        color: #fff;
        opacity: .8;
}
ul li a.link:hover, ul li a.link:active,ul li a.link:focus,.open>a,.open>a:hover,.open>a:focus{
       background-color: #246B80 !important;
        color: #fff !important;
        opacity: .8 !important;
}