bootstrap 活动时背景颜色发生变化

Question

以下是我的导航栏的代码，其中导航栏 link 名为 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;
}

问题是当我单击 link 并从中移除鼠标时，默认的 bootstrap 灰色覆盖了我的活动 class css。

here 是我的作品的图片以供进一步说明。

Answer 1

您已经添加了属性悬停和活动也添加了焦点

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

Answer 2

您已更改类，因此请更新 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;
}

bootstrap 活动时背景颜色发生变化

bootstrap background color changes on active

css

twitter-bootstrap