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

发布时间：2020-12-14 18:33:05 所属栏目：资源来源：网络整理

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

所以出于某种原因,我的悬停CSS无效.我正在使用他们的一些CSS的bootstrap.我的代码有问题,还是因为bootstrap的代码覆盖了我的代码？

HTML

<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;
}

因此你可以使用：

Working Example Here

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!