我如何更改引導導航欄懸停
[英]How i can change bootstrap navbar hover
問題描述
我該如何編輯才能看到導航欄選項。 目前它與背景顏色相同。我想將字體更改為白色，然后將其懸停在藍色字體的白色背景上。
<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=" 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>
1 個解決方案
解決方案1
2 已采納 2016-05-22 05:13:42
轉到下載的bootstrap.css文件，然后進行更改（可能在第4489行附近）。
更改此選擇器的CSS
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}
如何更改 hover 上的 Bootstrap 5 工具提示背景顏色？
[英]How can I change a Bootstrap 5 tooltip background color on hover?
如何使活動的導航欄鏈接更改背景顏色？ 引導程序4。
[英]How can I make the active navbar link change background color? Bootstrap 4.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.