twitter-bootstrap Bootstrap 3 下拉菜单更改子菜单焦点上的背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18547345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 dropdown menu changing background on submenu focus
提问by EBS
I have changed the background colors of my Bootstrap menu, but the background color of the main dropdown item in the list is changing when the submenu (the menu that opens up when the dropdown item is clicked) is in focus (ie my mouse is over it).
我已经更改了 Bootstrap 菜单的背景颜色，但是当子菜单（单击下拉项目时打开的菜单）处于焦点（即我的鼠标悬停）时，列表中主下拉项目的背景颜色正在发生变化它）。
This is the dropdown on hover (which is behaving as intended):
这是悬停时的下拉菜单（按预期运行）：
This is the dropdown when I have my mouse over the submenu that opens when the dropdown is clicked (the background color is not what I want; I want the background color to remain the same):
这是当我将鼠标悬停在单击下拉菜单时打开的子菜单上时的下拉菜单（背景颜色不是我想要的；我希望背景颜色保持不变）：
Here's the HTML:
这是 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>
And the CSS:
和 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;
}
回答by Faisal Khan Samrat
Just put this css i think this is worked
只要把这个 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;
}
回答by BrendanS
Maybe try this? Please post a jsfiddle so we can make sure it works.
也许试试这个？请发布一个 jsfiddle，以便我们确保它有效。
.navbar-default .navbar-nav > li:hover {
background: #your-background-color;
color: #your-text-color;
}
回答by Hiroyuki Nuri
Here's a working fiddle : https://jsfiddle.net/Lindow/yvyvg1ja/4/
这是一个工作小提琴：https: //jsfiddle.net/Lindow/yvyvg1ja/4/
To prevent the background from changing on dropdown click use :
要防止背景在下拉菜单中更改，请使用：
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background-color: #CC6666;
}
回答by larsmagnus
You need to style anchor tag children of the .openclass, along with :hoverand :focusstates like so:
您需要将风格定位标记儿童.open类，随着:hover和:focus状态，如下所示：
.navbar-mainnav .nav .open>a,
.navbar-mainnav .nav .open>a:focus,
.navbar-mainnav .nav .open>a:hover {
background: #B54646;
color: #fff;
}
Run the code snippet in full page to see how it works.
在整页中运行代码片段以查看它是如何工作的。
.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>