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
Twitter Bootstrap - navbar link color change on click
提问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;
}
}
}

