活动时引导背景颜色更改

Question

以下是我的导航栏的代码，其中包含一个名为查找代理​​的导航栏链接：

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

问题是当我单击链接并从中删除鼠标时，默认的引导颜色为灰色会覆盖我的活动类 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;
}

Answer 2

您在悬停时添加了属性，并且在焦点上添加了活动属性

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