Bootstrap 导航菜单悬停颜色

Question

我正在尝试一小时来更改导航菜单的悬停颜色，但我无法做到这一点。我在 CSS 中找不到菜单的悬停属性。

这是页面： http://jazbinasolutions.com/rooney

如果您将鼠标悬停在顶部菜单链接上，您会看到它们变白并且实际上是不可见的。

我们将不胜感激。

谢谢

Answer 1

这是您要更改的代码：

.navbar-inverse .navbar-nav>li>a:hover {
    color: #fff;
    background-color: transparent;
}

您应该使用更具体的规则来覆盖它：

.navbar.navbar-inverse.navbar-fixed-top .navbar-nav>li>a:hover {
    color: #000;
}

Answer 2

这是您使用特定选择器的确切代码，您不应该使用（除非完全保证，否则不应使用 !important）。在更改框架时，您还应该考虑使用自定义类。

查看代码片段中的工作示例。

html,
body {
  height: 100%;
}
body {
  padding-top: 50px;
}
.navbar.navbar-custom {
  background: white;
}
.navbar.navbar-custom {
  min-height: 85px;
}
.navbar.navbar-custom #bs-example-navbar-collapse-1 {
  padding-top: 22px;
}
.navbar.navbar-custom .navbar-nav > li > a:hover,
.navbar.navbar-custom .navbar-nav > li > a:focus {
  color: #333333;
  background-image: none;
}
.navbar.navbar-custom {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <!-- Navigation -->
  <nav class="navbar navbar-inverse navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
        <a class="navbar-brand" href="index.html">
          <img src="http://www.jazbinasolutions.com/rooney/images/ElregLogo2.png" />
        </a>

      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li> <a href="index.html">Home</a>

          </li>
          <li> <a href="about_us.html">About Us</a>

          </li>
          <li> <a href="projects.html">Projects</a>

          </li>
          <li> <a href="kompetanse.html">Kompetanse</a>

          </li>
          <li> <a href="contact.html">Kontakt</a>

          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
</div>