html - bootstrap header li 背景色

Question

这段代码请让我知道如何在悬停时更改 LI 背景颜色

 <nav class="navbar navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-codextro-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                 </button>
                <a class="navbar-brand" href="#"><img src="../logo.png" ></a>
                </div>
                <div class="collapse navbar-collapse navbar-right" id="bs-codextro-navbar-collapse-1">
                    <ul class="tabs nav navbar-nav">
                        <li><a href="#">WHO WE ARE</a></li>
                        <li><a href="#">WHAT WE DO</a></li>
                        <li><a href="#">PORTFOLIO</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </div>
            </div>
        </nav>

这是CSS

.navbar .navbar-nav > li > a:hover{background-color:none;

Answer 1

CSS 属性 background-color: none无效，因为颜色 none 不存在。您可以将其更改为 background-color: transparent使其完全透明。

我打开了 Chrome 的 DevTools 以查看菜单项上存在的样式。 :hover伪选择器用于 <a>在<li>里面而不是在 <li> 上本身。 Bootstrap 使用选择器 .nav>li>a:hover设置背景颜色。

在下面的示例中，我简单地覆盖了这个选择器(以及用于 :focus 的选择器)。最好将其范围限定为 .navbar-nav通过设置 .navbar-nav .nav>li>a:hover否则会影响所有 .nav结构。

更好的方法是查看 Bootstrap 如何处理导航栏的样式。它通过添加 .navbar-default 来实现。或 .navbar-inverse到 .navbar .查看 Bootstrap 的源代码并创建您自己的 .navbar-... 或许是个好主意样式类。

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

.nav>li>a:hover,
.nav>li>a:focus {
  background-color: transparent;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<nav class="navbar navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-codextro-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="bs-codextro-navbar-collapse-1">
      <ul class="tabs nav navbar-nav">
        <li><a href="#">WHO WE ARE</a>
        </li>
        <li><a href="#">WHAT WE DO</a>
        </li>
        <li><a href="#">PORTFOLIO</a>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</nav>