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

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

引导背景颜色变化激活

2 个答案: