bootstrap header li 背景颜色

Posted 2023-03-21

【中文标题】bootstrap header li 背景颜色

【英文标题】：bootstrap header li background color

【发布时间】：2015-02-25 11:53:16

【问题描述】：

这个代码请告诉我如何在悬停时更改 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:hoverbackground-color:none;

【参考方案1】：

除非没有其他 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

【参考方案2】：

 .tabs li:hover
    background-color:red;
    

【参考方案3】：

.navbar-nav li:hover abackground-color:none;

或

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

【参考方案4】：

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

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

在下面的示例中，我只是简单地覆盖了这个选择器（以及用于:focus 的选择器）。最好通过设置.navbar-nav .nav>li>a:hover 将其范围限定为.navbar-nav，否则会影响所有.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>