html – a：悬停不起作用,使用bootstrap

概述所以出于某种原因,我的悬停CSS无效.我正在使用他们的一些CSS的bootstrap.我的代码有问题,还是因为bootstrap的代码覆盖了我的代码？ HTML <nav class="navbar navbar-default navbar-fixed-top"> <div class="collapse navbar-collapse"> <ul class="nav navbar 所以出于某种原因,我的悬停CSS无效.我正在使用他们的一些CSS的bootstrap.我的代码有问题,还是因为bootstrap的代码覆盖了我的代码？

HTML

<nav >  <div >    <ul  role="tabList">        <li ><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;}

因此你可以使用：

Working Example Here

.navbar-default .navbar-nav>li>a:hover {  background-color: #B0B0B0;  color: red;}

总结

以上是内存溢出为你收集整理的html – a：悬停不起作用,使用bootstrap全部内容，希望文章能够帮你解决html – a：悬停不起作用,使用bootstrap所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。