Question

当我将鼠标悬停在下拉菜单中的某个项目上时，我想更改背景颜色和字体粗细。

当我使用'a'选择器时，我没有任何效果，当使用.link类时，它会加粗，但背景颜色不会改变。当我使用#action时，我会有理想的效果。

为什么会这样？

我最好是想使用.dropdown＆gt; ul＆gt; li>选择器，我该怎么做？

JSfiddle http://jsfiddle.net/ehall/4Xs2N/

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"     rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Switch between .link, #action and a -->
<style>
#action:hover{
  background-color:blue;
  color:white;
  font-weight:bold;
}
</style>

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
<ul class="dropdown-menu">
<li><a href="#" class="link" id="action" >Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>

Answer 1

更改

#action:hover{

到

ul.dropdown-menu a:hover{

Bootstrap下拉样式，奇怪的行为

1 个答案: