[英]Change color of bootstrap navbar on hover link?
我想知道当您在导航栏中按 hover 时如何更改链接的颜色,因为目前它们的颜色很难看。
谢谢你有什么建议吗?
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>
对于Bootstrap 3,这是我基于默认Navbar结构执行此操作的方式:
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #FFFF00;
color: #FFC0CB;
}
这更清洁:
ul.nav a:hover { color: #fff !important; }
没有必要比这更具体。 不幸的是,在这种情况下, !important
是必要的。
我还补充说:focus
和:active
出于可访问性原因以及智能手机/平板电脑/触摸屏用户的相同声明。
您可以尝试此操作来更改悬停时的链接背景
.nav > li > a:hover{
background-color:#FCC;
}
您必须覆盖CSS规则:
.navbar-inverse .brand, .navbar-inverse .nav > li > a
要么
.navbar .brand, .navbar .nav > li > a
取决于您是分别使用暗色还是浅色主题。 为此,请使用覆盖的规则添加CSS,并确保它在Bootstrap CSS 之后出现在HTML中。 例如:
.navbar .brand, .navbar .nav > li > a {
color: #D64848;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #F56E6E;
}
还有,你自定义自己的自举替代这里 。 在这种情况下,在Navbar部分中,您有@navbarLinkColor
。
2018年更新
您可以使用CSS更改Navbar链接颜色以覆盖Bootstrap颜色...
Bootstrap 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 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;
}
定位您想要更改的元素并使用!important
来覆盖分配给该元素的任何现有样式。 当不是绝对必要时,请务必不要使用!important
声明。
div.navbar div.navbar-inner ul.nav a:hover {
color: #fff !important;
}
.nav > li > a:focus,
.nav > li > a:hover
{
text-decoration: underline;
background-color: pink;
}
使用Come thing链接,这是基于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;
}
抱歉回复晚了。 你只能使用:
nav a:hover{
background-color:color name !important;
}
像这样的东西对我有用(使用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;
}
在我的情况下,我还希望链接文本在悬停之前保持黑色,所以我添加了.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;
}
如果你的Navbar代码如下:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
然后使用以下CSS样式更改导航栏品牌的悬停颜色
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: white;
}
因此,您的navbad-brand
悬停颜色将更改为白色。 我只是测试了它,它正确地为我工作。
这应该足够了:
.nav.navbar-nav li a:hover {
color: red;
}
.navbar-default .navbar-nav > li > a{ color: #e9b846; } .navbar-default .navbar-nav > li > a:hover{ background-color: #e9b846; color: #FFFFFF; }
这对我有帮助!
.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
color: black;
}
一段时间后,这对我有用。 仅更改 css。
.navbar-inner .navbar-brand:hover {
color: #fff;
}
对于 Bootstrap 5,您可以简单地使用:
.nav-link:hover{
color: green;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.