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

Question

我使用的是最新版本。

在我的导航栏中，我有：

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