单击导航栏 link 颜色变化

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>

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

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

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

它几乎可以正常工作，但是当我点击 link（不是悬停）一瞬间时，我的 link 变成了带有 border/box 阴影的灰色（悬停时一切看起来都应该如此）。

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

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

单击导航栏 link 颜色变化

Navbar link color change on click

html

css

sass

twitter-bootstrap