html - Bootstrap 导航栏列表项在单击时更改其颜色

Question

我在 Bootstrap 的导航栏中遇到了问题。 当我右键单击其中一个列表项(链接)将其重定向到另一个页面时，它的颜色保持为橙色(即实际上是悬停颜色)，当我在导航栏外单击时，颜色变为默认颜色(即绿色的)。 为什么这一切都在发生？

我认为即使在右键单击后它也应该保持默认的绿色。 下面是导航栏的图片，我右键单击它移动到购物页面后。

CSS 代码

.navbar-default .navbar-nav > li > a {

  color: #6ecd6e;
  font-size:15.7px;
  font-weight:400;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffb600;
}

Answer 1

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #666;
  float: left;
  padding: 20px;
}
li {
  float: left;
  margin-right: 10px;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus {
  color: #6ecd6e;
  font-size: 15.7px;
  font-weight: 400;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #ffb600;
}

<div class="navbar-default">
  <ul class="navbar-nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
  </ul>
</div>

在这种基于右键单击的特定情况下，如所描述的...发生的事情是右键单击导致链接聚焦，这就是链接保持橙色的原因。在我的示例中，我将 a:focus 移到了声明绿色的位置。