Question

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

Answer 1

可悲的是，您需要使用!important覆盖boostrap样式。除此之外，我不建议使用background:none;你只需要覆盖background-color属性，所以我建议添加这个css：

.nav > li > a:hover {
  background-color: transparent !important;
  /* smooth override with important */
}

Answer 2

它被bootstrap替换

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #eee; <--
}

你应该试试

.nav li a:hover {
    background: none !important;
}

Answer 3

您可以添加以下内容，但不需要!important：

.navbar .nav>li>a:focus, .navbar .nav>li>a:hover {
    background: none;
}

如果可能，应避免!important ......

您可以越详细地定义要在css中更改的元素，它就越重要。因此，添加.navbar比仅仅.nav>li>a:hover更好地定义，因此对css更重要，这意味着更少定义被覆盖;）

链接背景不会根据我的需要改变

3 个答案: