.navbar
有0.5 transparency
,并且在悬停时也不希望链接的背景发生变化。 (现在背景为白色)
如果我使用navbar-default
课程,那么我可以更改列表项和链接的背景但不能执行transparency
课程。如果我不使用navbar-default
/ inverse我能够navbar
透明但链接在悬停时有一些background
属性,我无法覆盖。
HTML
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img class="logo" src="images/brand.png"></a>
<button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse"><span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
</div>
<div class="navbar-collapse collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class=""><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS
.navbar {
background: rgba(0, 0, 0, 0.5);
font-family: avro;
}
.nav li a:hover {
background: none;
}
答案 0 :(得分:1)
可悲的是,您需要使用!important
覆盖boostrap样式。除此之外,我不建议使用background:none
;你只需要覆盖background-color
属性,所以我建议添加这个css:
.nav > li > a:hover {
background-color: transparent !important;
/* smooth override with important */
}
答案 1 :(得分:0)
它被bootstrap替换
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee; <--
}
你应该试试
.nav li a:hover {
background: none !important;
}
答案 2 :(得分:0)
您可以添加以下内容,但不需要!important
:
.navbar .nav>li>a:focus, .navbar .nav>li>a:hover {
background: none;
}
如果可能,应避免!important
......
您可以越详细地定义要在css中更改的元素,它就越重要。因此,添加.navbar
比仅仅.nav>li>a:hover
更好地定义,因此对css更重要,这意味着更少定义被覆盖;)