所以出于某种原因,我的悬停CSS无效.我正在使用他们的一些CSS的bootstrap.我的代码有问题,还是因为bootstrap的代码覆盖了我的代码？
<nav class="navbar navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
CSS
ul>li>a {
color: black;
padding: 15px;
}
ul>li>a:hover {
background-color: #B0B0B0;
color: red;
}
解决方法
这是因为默认的Bootstrap样式是
more specific.
这些是您需要覆盖的选择器：
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus {
color: #333;
background-color: transparent;
}
因此你可以使用：
.navbar-default .navbar-nav>li>a:hover {
background-color: #B0B0B0;
color: red;
}
