die Hintergrundfarbe Standard ändern und schweben Hintergrund-Farbe von navbar

Ich habe folgende Bootstrap navbar: JSBin:die Hintergrundfarbe Standard ändern und schweben Hintergrund-Farbe von navbar

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

Ich möchte folgendes tun:

die Farbe Standard-Hintergrund ändern der navbar zu #e1e1e1
, wenn wir auf dropdown und help, die Hintergrundfarbe des Elements wird noch dunkler (zB #a9a9a9)

schweben

Wer weiß, wie dies zu erreichen?

Quelle

2017-07-28 SoftTimur

Ziel es mit diesen Regeln zu ändern, um das Standard-Bootstrap-Styling zu überschreiben.

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

Quelle

2017-07-28 21:08:39

Sie müssen nur die Elemente auswählen, die Sie wünschen

.navbar { 
    background-color: #e1e1e1; 
} 

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

Quelle

2017-07-28 21:07:53

Ist das, was Sie brauchen?

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

Quelle

2017-07-28 21:08:53 Gerard

die Hintergrundfarbe Standard ändern und schweben Hintergrund-Farbe von navbar

Antwort

Verwandte Themen