移走鼠标后更改导航栏中选项卡的背景颜色

时间：2016-06-29 01:11:51

标签： html twitter-bootstrap

单击“关于”选项卡时，将显示下拉列表。下拉列表的元素为浅蓝色背景。现在，当您将鼠标从“关闭”移开时，下拉菜单仍然处于活动状态，则背景为白色。我想将白色背景更改为浅蓝色背景。我怎样才能实现这一目标？我感谢您的帮助。谢谢！

<!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 个答案:

答案 0 :(得分：1)

尝试使用下面的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>

答案 1 :(得分：1)

了解当前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>

Example from bootstrap docs

Usage of .open & .dropdown-toggle

之前已回答过这个问题： @ Bimal Das

答案 2 :(得分：0)

通常你会使用锚链接状态a：link，它允许你设置一个没有鼠标的链接的样式。这看起来像这样：

a：link {background-color：light-blue;}

但是，您的代码显示白色！重要且无法覆盖，因此您应在执行上述代码之前删除此样式。

相关问题
最新问题