Bootstrap 3导航栏锚元素在活动/焦点状态下未正确设置样式

Question

我正在使用bootstrap作为UI的前端框架,目前,我正在尝试自定义CSS.一切都很好,除了一个小细节:

不知道为什么会这样.我认为这是:active所述链接的属性,但是,当我尝试应用:activecss规则时,它不会得到修复.这是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:

这里的例子

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

..或者说transparent:

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