移开鼠标后，更改导航栏中选项卡的背景色
[英]Changing the background color of the tab in navigation bar after moving away the mouse
问题描述
单击“关于”选项卡时，它将显示一个下拉列表。 下拉菜单的元素具有浅蓝色背景。 现在，当下拉菜单仍处于活动状态时，将鼠标从“关于”移开时，背景为白色。 我想将白色背景更改为浅蓝色背景。 我怎样才能做到这一点？ 我感谢您的帮助。 谢谢！
<!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schools.com - No Copyright --> <title>Bootstrap Theme Company Page</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"> <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/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> <style> .navbar { margin-bottom: 0; background-color: #B21A09; z-index: 9999; border: 0; font-size: 12px !important; line-height: 1.42857143 !important; letter-spacing: 4px; border-radius: 0; font-family: Montserrat, sans-serif; } .navbar li a, .navbar .navbar-brand { color: #fff !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } .dropdown-menu { background-color: #5A79A5; } .navbar-nav li a:hover, a:visited, .navbar-nav li.active a { background-color: #5A79A5 !important; } .dropdown-menu li a:hover { background-color: #9CAAC6 !important; } a:active.dropdown-toggle { background-color: #5A79A5 !important; } </style> </head> <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> <nav class="navbar navbar-default main"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html">HOME</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>
3 个解决方案
解决方案1
1 2016-06-29 01:26:35
尝试使用以下CSS覆盖：
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover { background-color: #76cded !important; }
<!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schools.com - No Copyright --> <title>Bootstrap Theme Company Page</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"> <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/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> <style> .navbar { margin-bottom: 0; background-color: #B21A09; z-index: 9999; border: 0; font-size: 12px !important; line-height: 1.42857143 !important; letter-spacing: 4px; border-radius: 0; font-family: Montserrat, sans-serif; } .navbar li a, .navbar .navbar-brand { color: #fff !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } .dropdown-menu { background-color: #5A79A5; } .navbar-nav li a:hover, a:visited, .navbar-nav li.active a { background-color: #5A79A5 !important; } .dropdown-menu li a:hover { background-color: #9CAAC6 !important; } a:active.dropdown-toggle { background-color: #5A79A5 !important; } </style> </head> <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> <nav class="navbar navbar-default main"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html">HOME</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>
解决方案2
1 已采纳 2016-06-29 02:02:32
使用当前CSS的布局方式，请尝试使用：
的CSS
.open .dropdown-toggle{
background-color: #9CAAC6 !important;
}
的HTML
<li class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
ABOUT
<span class="caret"></span>
</a>
</li>
之前已经回答了这个问题：@ Bimal Das
解决方案3
0 2016-06-29 01:23:29
通常，您将使用锚链接状态a：link，该状态允许您设置没有鼠标悬停的链接的样式。 看起来像这样：
a：link {background-color：light-blue;}
但是，您的代码显示白色很重要，不能被覆盖，因此在执行上述代码之前应删除此样式。
更改导航栏的背景颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.