css - 链接背景没有根据我想要的改变

Question

Here is my code example

.navbar 具有0.5 透明度 并且不希望在悬停时更改链接的背景。 (现在背景是白色的)

如果我使用 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 */
}