更改默認背景顏色和懸停導航欄的背景色

我有以下引導導航欄：JSBin：更改默認背景顏色和懸停導航欄的背景色

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <script src="https://code.jquery.com/jquery.min.js"></script> 
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <nav class="navbar navbar-default navbar-static-top" ng-controller="NavCtrl"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdow <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="https://www.google.fr">New</a></li> 
 
       <li><a href="https://www.google.fr">Old</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="https://www.google.fr">Help</a></li> 
 
     </ul> 
 
     </nav> 
 
    </body> 
 
    </html>

我要做到以下幾點：

將導航欄的默認背景顏色更改爲#e1e1e1
當我們懸停在dropdown和help，該元素的背景顏色變得更暗（例如，#a9a9a9）

有誰知道如何實現這一目標？

來源

2017-07-28 SoftTimur

目標是與這些規則來覆蓋默認的引導造型元素。

.navbar-default { 
    background-color: #e1e1e1; 
} 
.navbar-default .navbar-nav>li>a:focus, 
.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, 
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { 
    background: #a9a9a9; 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <style> 
 
    .navbar-default { 
 
    background-color: #e1e1e1; 
 
} 
 
nav.navbar-default .navbar-nav>li>a:focus, 
 
nav.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, 
 
nav.navbar-default .navbar-nav>li>a:hover, 
 
nav.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { 
 
    background: #a9a9a9; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-default navbar-static-top" ng-controller="NavCtrl"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdow <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="https://www.google.fr">New</a></li> 
 
      <li><a href="https://www.google.fr">Old</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="https://www.google.fr">Help</a></li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 
</html>

來源

2017-07-28 21:08:39

你只需要選擇您想更改

.navbar { 
    background-color: #e1e1e1; 
} 

nav li:hover { 
    background-color: #a9a9a9; 
}

來源

2017-07-28 21:07:53

這是你需要什麼？

.nav li { 
 
background: #e1e1e1; 
 
} 
 
.nav li:hover { 
 
background: #a1a1a1; 
 
}

<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <nav class="navbar navbar-default navbar-static-top" ng-controller="NavCtrl"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdow <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="https://www.google.fr">New</a></li> 
 
      <li><a href="https://www.google.fr">Old</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="https://www.google.fr">Help</a></li> 
 
    </ul> 
 
    </nav>

來源

2017-07-28 21:08:53 Gerard

更改默認背景顏色和懸停導航欄的背景色

回答

相關問題