悬停时更改引导导航栏颜色[重复]答案

【问题标题】：Change Bootstrap navbar color when hover [duplicate]悬停时更改引导导航栏颜色[重复]
【发布时间】：2021-03-10 09:30:58
【问题描述】：

当鼠标悬停在每个链接上时，我想更改导航栏中的链接颜色。

这是我的代码：

<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"></a>
            </div>

            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
                <li class="your_account"><a href="#">Your Account</a></li>

            </ul>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm">
                <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Inspire yourself" aria-label="Search">
                <i class="fas fa-search"></i>
            </form>
        </div>

    </nav>
</header>

我尝试使用此代码更改它，但没有成功！

nav ul li:hover {
    color: red;
}

有什么建议吗？

【问题讨论】：

你的代码只会改变你悬停的 li 元素的颜色，而不是整个导航栏
您可以使用.navbar-default .navbar-nav > li > a { color: red; }。 > 用于在您将来使用这些下拉菜单中没有颜色变化。

标签： html css bootstrap-4

【解决方案1】：

链接的颜色被a 标签的默认样式覆盖，因此您应该将其应用于a 标签，而不是li 标签：

nav ul li:hover a {
    color: red;
}

<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li class="your_account"><a href="#">Your Account</a></li>
    </ul>
</nav>

【讨论】：

也不起作用，当我将鼠标悬停在 a 标签上时，颜色变为浅灰色而不是红色
这可能是因为您已经在某处定义了该样式。试试color: red !important;。
它现在可以工作了，我认为它试图覆盖引导程序样式。谢谢
不客气。请注意覆盖引导样式或使用!important 样式。最好使您的选择器更具体，以便样式覆盖而不是使用!important。
那么正确的做法是什么？

【解决方案2】：

你需要在锚标签上而不是<li>

上赋予悬停效果

nav ul li a:hover {
  color: red;
}

nav ul li a:hover {
  color: red;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        <!-- Bootstrap CSS -->
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous"
        />

        <title>Hello, world!</title>
      </head>
      <body>
        <header>
          <nav class="navbar navbar-default">
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand" href="index.html"></a>
              </div>

              <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
                <li class="your_account"><a href="#">Your Account</a></li>
              </ul>

              <!-- Search form -->
              <form
                class="form-inline d-flex justify-content-center md-form form-sm"
              >
                <input
                  class="form-control form-control-sm mr-3 w-75"
                  type="text"
                  placeholder="Inspire yourself"
                  aria-label="Search"
                />
                <i class="fas fa-search"></i>
              </form>
            </div>
          </nav>
        </header>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script
          src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"
        ></script>
      </body>
    </html>
  </body>
</html>

【讨论】：

【解决方案3】：

nav ul li a:hover {
    color: red;
}

或

.navbar-nav a:hover{
  color: red;
}

【讨论】：