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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29240911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:28:28  来源:igfitidea点击:

Twitter Bootstrap - navbar link color change on click

htmlcsstwitter-bootstraptwitter-bootstrap-3sass

提问by Marcin Nabia?ek

I'm using the latest version.

我正在使用最新版本。

Inside my navbar I have:

在我的导航栏中,我有:

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

I would like to change navbar background colour and link colour.

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

I've created the following Sass code (SCSS syntax).

我创建了以下 Sass 代码(SCSS 语法)。

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

It's working almost fine, but when I click on link (not on hover) for a split second I'm getting my link in gray colour with border/box shadow (on hover and on out everything looks as it should).

它几乎可以正常工作,但是当我单击链接(而不是悬停)一瞬间时,我的链接呈灰色,带有边框/框阴影(悬停时和外面的一切看起来都应该如此)。

The question is - what class to use to remove border/shadow and use colour I defined? I've tried a while and achieved nothing. It's really hard for me to guess what class to use to achieve effect I want.

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

回答by AndrewL64

You need to include :focusand :activetoo like this:

您需要包括: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;
    }
  }
}