html - Bootstrap 3 导航栏 anchor 元素在事件/焦点状态下的样式不正确

Question

我正在使用 bootstrap 作为我的 UI 前端框架，目前，我正在尝试自定义 CSS。除了一个小细节外，一切正常:

不知道为什么会这样。我认为这是所述链接的 :active 属性，但是，当我尝试应用 :active css 规则时，它没有得到修复。这是 html 和 css:

<nav class="navbar navbar-SwitchHon navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#SwitchHon-main-navbar">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="img/brand-switchhon.png"></a>
                </div>
                <div class="collapse navbar-collapse" id="SwitchHon-main-navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><i class="fa fa-users"></i> Inicio</a></li>
                        <li><a href="#"><i class="fa fa-newspaper-o"></i> Productos y Servicios</a></li>
                        <li><a data-toggle="modal" data-target="#modalContact"><i class="fa fa-envelope-o"></i> Contactanos</a></li>
                        <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
                    </ul>
                </div>
            </div>
        </nav>

和CSS:

.navbar-SwitchHon{
    background-color: #34495e;
    border-radius: 0px;
    font-size: 1.1em;
    border-bottom: 0px;
}
.navbar-brand img{
    height: 40px;
    width: auto;
    margin-top: -11px;
}
.nav li{
    text-align: center;
}
.nav li a{
    color: #fff;
    transition: all 0.5s ease;
}
.navbar-header a{
    transition: all 0.5s ease;
}
.nav li a:hover, .navbar-header a:hover, .nav li a:active, .navbar-header a:active{
    transition: all 0.5s ease;
    background-color: rgba(44, 62, 80,0.4);
}
.navbar-header a:hover{
    opacity: 0.9;
    transition: all 0.5s ease;
}
.navbar-brand a{
    transition: all 0.5s ease;
}

我确定它一定是一个简单的修复程序，但我似乎找不到它。任何帮助将非常感激!我希望它保持与您将鼠标悬停在其上时相同的方式。

Answer 1

该背景颜色实际上出现在 :focus 状态。

以下是默认 Bootstrap 样式表中的相关选择器:

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

因此你可以用不同的background-color覆盖它:

Example Here

.navbar .nav > li > a:focus {
  background-color: rgba(44, 62, 80, 0.4);
}

..或者让它透明:

.navbar .nav > li > a:focus {
  background-color: transparent;
}