Bootstrap 3下拉菜单在子菜单焦点上更改背景

Posted 2023-03-05

【中文标题】Bootstrap 3下拉菜单在子菜单焦点上更改背景

【英文标题】：Bootstrap 3 dropdown menu changing background on submenu focus

【发布时间】：2013-09-04 00:51:07

【问题描述】：

我已经更改了我的 Bootstrap 菜单的背景颜色，但是当子菜单（单击下拉项时打开的菜单）处于焦点时（即我的鼠标在它上面）。

这是悬停时的下拉菜单（按预期运行）：

这是当我将鼠标悬停在单击下拉菜单时打开的子菜单上时的下拉菜单（背景颜色不是我想要的；我希望背景颜色保持不变）：

这是 html：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Dropdown <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
    </ul>
</li>

还有 CSS：

.navbar-mainnav  
    background-color: #883333;
    background-image: none;


.navbar-mainnav a, .navbar-mainnav a:hover 
    color: #FFFFFF;


.navbar-mainnav .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus 
    color: #ffffff;
    background-color:transparent;


.navbar-mainnav .nav > li > a:hover, .mainnav > li.dropdown.open  
  background-image: none;
  background-color: #B54646;


.navbar-mainnav .dropdown-menu > li > a:hover, .navbar-mainnav .dropdown-menu > li > a:focus 
  background-color: white;
  background-image: none;
  filter: none;


.navbar-mainnav .dropdown-menu > li > a:hover 
  background-color: #CC6666;
  background-image: none;

【问题讨论】：

请你做个小提琴

需要一个小提琴，html看起来不完整。

【参考方案1】：

只要把这个 css 我认为这行得通

.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle 
background-color: #B54646;

【参考方案2】：

也许试试这个？请发布一个 jsfiddle，以便我们确保它有效。

.navbar-default .navbar-nav > li:hover 
  background: #your-background-color;
  color: #your-text-color;

【参考方案3】：

这是一个有效的小提琴：https://jsfiddle.net/Lindow/yvyvg1ja/4/

为了防止背景在下拉点击时改变：

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover 
    background-color: #CC6666;

【参考方案4】：

您需要设置.open 类的锚标记子项的样式，以及:hover 和:focus 状态，如下所示：

.navbar-mainnav .nav .open>a, 
.navbar-mainnav .nav .open>a:focus, 
.navbar-mainnav .nav .open>a:hover 
  background: #B54646;
  color: #fff;

在整页中运行代码 sn-p 看看它是如何工作的。

.navbar-mainnav  
    background-color: #883333;
    background-image: none;


.navbar-mainnav a, .navbar-mainnav a:hover 
    color: #FFFFFF;


.navbar-mainnav .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus 
    color: #ffffff;
    background-color:transparent;


.navbar-mainnav .nav > li > a:hover, .mainnav > li.dropdown.open  
  background-image: none;
  background-color: #B54646;


.navbar-mainnav .dropdown-menu > li > a:hover, .navbar-mainnav .dropdown-menu > li > a:focus 
  background-color: white;
  background-image: none;
  filter: none;


.navbar-mainnav .dropdown-menu > li > a:hover 
  background-color: #CC6666;
  background-image: none;


.navbar-mainnav .nav .open>a, 
.navbar-mainnav .nav .open>a:focus, 
.navbar-mainnav .nav .open>a:hover 
  background: #B54646;
  color: #fff;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-mainnav">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>