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＆gt; li> ：悬停{背景颜色：无; }

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-...样式类是个好主意。

＆＃13;

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

.nav>li>a:hover,
.nav>li>a:focus {
  background-color: transparent;
}

＆＃13;

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

＆＃13;

Answer 2

除非没有其他css覆盖你的css规则，否则这应该有效：

如果背景颜色分配给li元素：

ul.navbar-nav > li:hover {
    background-color: #333; // your color
}

如果您想定位a元素：

ul.navbar-nav > li:hover > a {
    background-color: #333; // your color
}

Answer 3

 .tabs li:hover{
    background-color:red;
    }

Answer 4

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

或

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

bootstrap header li背景颜色

4 个答案: