单击时导航栏链接颜色更改

Question

我正在使用最新版本的 Bootstrap 3。

在我的导航栏中，我有：

<div class="collapse navbar-collapse" id="topnav-navbar">
<ul class="nav navbar-nav navbar-right">
        <li><a href="http://localhost/anything">Text</a></li>
</ul>

我想更改导航栏背景颜色和链接颜色。

我创建了以下 Sass 代码（SCSS 语法）。

.navbar {    
  background: #2C3E50;
  .navbar-nav li a {
    color: #eee;
    &:hover {
      color: #18BC9C;
    }
  }
}

它几乎可以正常工作，但是当我单击链接（而不是悬停）片刻时，我的链接是灰色的，带有边框/框阴影（悬停时，一切看起来都应该）。

问题是 - 使用什么类来移除边框/阴影并使用我定义的颜色？我已经尝试了一段时间，但一无所获。我真的很难猜到要使用什么类来达到我想要的效果。

Answer 1

您也需要像这样包含:focus 和:active：

.navbar {    
  background: #2C3E50;
  .navbar-nav li a {
    color: #eee;
    &:hover, &:focus, &:active {
      color: #18BC9C;
      background-color: transparent;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }
  }
}