Question

HTML：

<ul id="main-menu" class="menu nav navbar-nav navbar-collapse">
  <ul class="menu nav navbar-nav">
     <li class="first leaf active-trail active active menu-link-home">
        <a href="/conditions_treatments/childrens_care" title="" class="active-trail active">Home</a>
     </li>

     <li class="expanded dropdown menu-link-health-information radix-dropdown-processed open">                
        <a href="/childrens/hodgkins_lymphoma" title="" class="dropdown-toggle radix-dropdown-processed" data-toggle="dropdown" data-target="#">Health Information<span class="caret"></span></a>
          <ul class="dropdown-menu">
             <li class="first last leaf menu-link-childrens-health-information">
                <a href="/childrens/health_information">Children's Health Information</a>
             </li>
          </ul>
     </li>

     <li class="leaf menu-link-our-services">
        <a href="/" title="">Our Services</a>
     </li>

     <li class="leaf menu-link-facilities--directions">
        <a href="/" title="">Facilities &amp; Directions</a>
     </li>

     <li class="leaf menu-link-patient--visitor-information">
        <a href="/" title="">Patient &amp; Visitor Information</a>
     </li>

     <li class="last leaf menu-link-research--education">
        <a href="/" title="">Research &amp; Education</a>
     </li>

  </ul>          
</ul>

将鼠标悬停在＆＃34;健康信息＆＃34;链接，我无法让背景从深灰色变为白色。我曾尝试过写a：hover样式来改变背景，但似乎我的css不够具体。

Answer 1

你只需要覆盖颜色（使用bootstrap如何设置它）：

.nav .open > a:hover{
       background-color:#fff; 
}

bootply：http://www.bootply.com/fa29S1g3LV

Answer 2

我不得不针对多个选择器：

.navbar-default .navbar-nav .nav > li > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.active.open > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.active.open > ul.dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.open > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.open > ul.dropdown-menu a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.open > a,
.navbar-default .navbar-nav .nav > li.dropdown.open > ul.dropdown-menu a, {

    background-color: #fff;
    border-color: #fff;
}

Bootstrap更改导航项目的背景颜色

2 个答案: