Wie kann ich bootstrap navbar Hover ändern

Wie kann ich dies bearbeiten, um die Navbar-Optionen zu sehen. Gegenwärtig hat es die gleiche Farbe wie background.Ich möchte die Schriftart vorher zu weiß ändern und sie ändern, wenn es auf weißen Hintergrund mit blauer Farbschrift schwebt.Wie kann ich bootstrap navbar Hover ändern

<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <div class="tog" style="padding-top:7px; "> 
 
     <a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span> 
 
     </a> 
 
     </div> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse navbar-ex1-collapse" id="top-nav"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#"><i class="fa fa-home"></i> Home</a> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-suitcase"></i><span class=" \t glyphicon glyphicon-bell"> </span></a> 
 
     </li> 
 

 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown"> 
 
      <img src="http://placehold.it/30x30" class="img-circle special-img">xxx <b class="caret"></b> 
 
      </a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#"><i class="fa fa-cog"></i> Account</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Quelle

2016-05-22 Kaw123

auf die heruntergeladene Datei bootstrap.css gehen und die Änderungen macht vielleicht irgendwo um Zeile 4489 ..

Änderung der CSS dieser Selektor

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { 
    color: #333; 
    background-color: transparent; 
}

Quelle

2016-05-22 05:13:42

während dieser funktioniert - es ändert das Basis-CSS von Bootstrap. Eine Tatsache, an die Sie sich möglicherweise nicht mehr erinnern, wenn Sie einen anderen Effekt wünschen oder den Effekt alle zusammen entfernen möchten. Weitaus besser wäre es, eine eigene CSS-Regel in Ihr eigenes Stylesheet einzufügen und sie nach dem Laden des Bootstrap-Objekts zu laden, damit es Vorrang hat. IMO :)) – gavgrif

manchmal ist es nicht möglich, bootstrap CSS zu überschreiben und das ist als einzige Lösung in diesem Fall übrig .. –

Wie kann ich bootstrap navbar Hover ändern

Antwort

Verwandte Themen