更改下拉菜單的顏色當點擊和懸停時

當我點擊它時，我的下拉菜單將返回到navbar-default的顏色。當我將鼠標懸停在下拉菜單中的項目上時，它們也會回到navbar-default的顏色。更改下拉菜單的顏色當點擊和懸停時

這裏是我的意思圖片：

這裏是我的HTML：

<div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Cable</a></li> 
        <li><a href="#">DSl</a></li> 
        <li><a href="#">Wireless</a></li> 
        <li><a href="#">Business Cable</a></li> 
        <li><a href="#">Business DSL</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Phone</a></li> 
      <li><a href="#">Android TV</a></li> 
      <li><a href="#">Shaw Direct</a></li> 
      <li><a href="#">Careers</a></li> 
     </ul> 
    </div>

這是我的CSS：

.navbar-default { 
    background-color: #00AEFE; 
} 
.navbar-default:visited { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu:hover { 
    background-color: #00AEFE; 
}

來源

2016-12-30 Thomas Hutton

嘗試增加'important'像'背景顏色：＃！00AEFE重要;'這將迫使該特定的風格是最重要的。 –

[在Twitter Bootstrap 3中更改導航欄顏色]可能的重複項目（http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3） – vanburen

您還沒有提出任何問題，或包含足夠的CSS來解決任何問題。如果你正在談論你點擊一個元素時看到的顏色（當左鍵點擊時），這就是'：active'僞類。 –

根本就這個與覆蓋引導類

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
    background-color: #00AEFE; 
} 
.nav > li > a:focus, .nav > li > a:hover { 
    background-color: #00AEFE; 
}

檢查片段是你需要什麼？運行段，然後切換到全屏模式，然後檢查

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<style> 
 
ul.dropdown-menu { 
 
    background-color: #00AEFE; 
 
} 
 
ul.dropdown-menu:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav > li > a:focus, .nav > li > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 

 
</style> 
 
<div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Cable</a></li> 
 
        <li><a href="#">DSl</a></li> 
 
        <li><a href="#">Wireless</a></li> 
 
        <li><a href="#">Business Cable</a></li> 
 
        <li><a href="#">Business DSL</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Phone</a></li> 
 
      <li><a href="#">Android TV</a></li> 
 
      <li><a href="#">Shaw Direct</a></li> 
 
      <li><a href="#">Careers</a></li> 
 
     </ul> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

來源

2016-12-30 01:46:53

更改下拉菜單的顏色當點擊和懸停時

回答

相關問題