Html 更改悬停链接上引导程序导航栏的颜色?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16625972/
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
Change color of bootstrap navbar on hover link?
提问by Callum
I want to know how to change the color of the links when you hover over them in the nav bar, as currently they are an ugly color.
我想知道如何在导航栏中将鼠标悬停在链接上时更改链接的颜色,因为目前它们是一种难看的颜色。
Thanks for any suggestions?
感谢您提供任何建议?
HTML:
HTML:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div>
</div>
</div>
回答by Leniel Maccaferri
回答by trebor1979
This is cleaner:
这更干净:
ul.nav a:hover { color: #fff !important; }
There's no need to get more specific than this. Unfortunately, the !important
is necessary in this instance.
没有必要比这更具体了。不幸的是,!important
在这种情况下是必要的。
I also added :focus
and :active
to the same declaration for accessibility reasons and for smartphone/tablet/touchscreen users.
出于可访问性原因和智能手机/平板电脑/触摸屏用户,我还在同一声明中添加了:focus
和:active
。
回答by Seydou Loum
You can try this to change the link background on hover
你可以试试这个来改变悬停时的链接背景
.nav > li > a:hover{
background-color:#FCC;
}
回答by Zim
Updated 2018
2018 年更新
You can change the Navbar link colorswith CSS to override Bootstrap colors...
您可以使用 CSS更改导航栏链接颜色以覆盖 Bootstrap 颜色...
Bootstrap 4
引导程序 4
.navbar-nav .nav-item .nav-link {
color: red;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
color: pink;
}
Bootstrap 4 navbar link color demo
Bootstrap 3
引导程序 3
.navbar .navbar-nav > li > a,
.navbar .navbar-nav > .active > a{
color: orange;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
color: red;
}
Bootstrap 3 navbar link color demo
改变或 customize the entire Navbar color自定义整个导航栏颜色,请参阅:https://stackoverflow.com/a/18530995/171456https://stackoverflow.com/a/18530995/171456
回答by Gabriel Petrovay
You would have to overwrite the CSS rule:
您将不得不覆盖 CSS 规则:
.navbar-inverse .brand, .navbar-inverse .nav > li > a
or
或者
.navbar .brand, .navbar .nav > li > a
depending if you are using the dark or light theme, respectively. To do this, add a CSS with your overwritten rules and make sure it comes in your HTML afterthe Bootstrap CSS. For example:
分别取决于您使用的是深色主题还是浅色主题。为此,请添加一个带有覆盖规则的 CSS,并确保它在 HTML 中出现在 Bootstrap CSS 之后。例如:
.navbar .brand, .navbar .nav > li > a {
color: #D64848;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #F56E6E;
}
There is also the alternative where you customize your own Boostrap here. In this case, in the Navbarsection, you have the @navbarLinkColor
.
还有一种选择,您可以在此处自定义您自己的 Boostrap 。在这种情况下,在导航栏部分,您有@navbarLinkColor
.
回答by Kevin Lynch
Target the element you wish to change and use !important
to overwrite any existing styles that are assigned to that element. Be sure not to use the !important
declaration when it is not absolutely necessary.
定位您希望更改并用于!important
覆盖分配给该元素的任何现有样式的元素。!important
如果不是绝对必要,请确保不要使用声明。
div.navbar div.navbar-inner ul.nav a:hover {
color: #fff !important;
}
回答by Ujjwal Kumar Gupta
.nav > li > a:focus,
.nav > li > a:hover
{
text-decoration: underline;
background-color: pink;
}
回答by Farhan Ghaffar
Sorry for late reply. You can only use:
抱歉回复晚了。您只能使用:
nav a:hover{
background-color:color name !important;
}
回答by socialCoder
Use Come thing link this , This is Based on Bootstrap 3.0
使用 Come 链接这个,这是基于 Bootstrap 3.0
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #977EBD;
color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #977EBD;
color: #FFFFFF;
}
回答by Eric
Something like this has worked for me (with Bootstrap 3):
这样的事情对我有用(使用 Bootstrap 3):
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
font-family: proxima-nova;
font-style: normal;
font-weight: 100;
letter-spacing: 3px;
text-transform: uppercase;
color: black;
}
In my case I also wanted the link text to remain black before the hover so i added .navbar-nav > li > a
就我而言,我还希望链接文本在悬停之前保持黑色,因此我添加了.navbar-nav > li > a
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
font-family: proxima-nova;
font-style: normal;
font-weight: 100;
letter-spacing: 3px;
text-transform: uppercase;
color: black;
}