您的位置: 首页  >  技术问答  >  更改默认背景颜色和悬停导航栏的背景色

更改默认背景颜色和悬停导航栏的背景色

分类: 技术问答 • 2022-06-30 10:14:30
问题描述：

我有以下引导导航栏：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>

我要做到以下几点：

  1. 将导航栏的默认背景颜色更改为#e1e1e1
  2. 当我们悬停在dropdown和help，该元素的背景颜色变得更暗（例如，#a9a9a9）

有谁知道如何实现这一目标？

答

目标是与这些规则来覆盖默认的引导造型元素。

.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>

答

你只需要选择您想更改

.navbar { 
    background-color: #e1e1e1; 
} 

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

答

这是你需要什么？

.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>

相关推荐