悬停状态下的锚颜色不起作用答案

【问题标题】：Anchor color on hover state not working悬停状态下的锚颜色不起作用
【发布时间】：2018-04-25 13:45:38
【问题描述】：

我希望我的所有锚文本在悬停时变为绿色。
我希望 a:hover{ color: green; } 可以工作，但它没有。
有人可以解释一下为什么吗？谢谢。

这是我的代码：

a:hover{
  color: green;
}

<link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div class="container-fluid">
    <nav class="navbar navbar-inverse navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- 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="#">Brand</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">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</div>
<!-- end container -->

同样在Codepen

【问题讨论】：

标签： javascript html css css-selectors

【解决方案1】：

Bootstrap 使用类来设置导航链接的样式。使用样式时，样式的优先级很重要。 a:hover 本身将被 .nav.navbar-nav li a:hover 覆盖，即使它是在您的代码之前定义的。

在此处阅读： https://css-tricks.com/specifics-on-css-specificity/

附：尽量不要将!important 添加到您的风格中。它使更改事情变得更加困难，使您的代码可维护性变得异常困难，并且会使像您一样从事您的项目的任何人都不像他们应该的那样工作:)

在某些时候肯定需要!important，但我只想说在使用上要保守。

【讨论】：

【解决方案2】：

你正在使用 Bootstrap，它在不同的地方定义了锚点的颜色。

使用 Bootstrap 内置的可燃性，而不是仅仅覆盖 Bootstrap（并且在很多情况下需要覆盖所有锚点）。

下载源代码，更新控制颜色的适用 SASS 变量并将源代码包含在构建过程中。

使用 Bootstrap pre-4 有几个其他选项：下载现成的自定义 Bootstrap 的工具（主要是为您完成修改 SASS 变量和转译的工作）。或者使用 Bootstrap 主题。（覆盖$navbar-default-brand-hover-color 将更改导航栏中的悬停颜色。）

其中任何一个最初都需要更长的时间，但是当下一个“只需更改”要求出现时，您将能够快速完成。

【讨论】：

我认为这对于非初学者来说是一个非常好的答案。如果我在一年前看到这个答案，我就不会理解它。现在看到它，我认为这是一个很棒的解决方案，尤其是对于我的 Rails 项目。我想我的意思是，如果您是初学者并且正在忽略此答案，请将此页面添加为书签并在几个月后查看它，您可能会有新的见解。

【解决方案3】：

由于您使用的是引导库导航栏，它有自己定义的 css 类，因此您无法看到更改。

请使用

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{
  color: green;
}

-帮助:)

【讨论】：

好建议，但我希望所有标签都是绿色的，而不仅仅是其中一个

【解决方案4】：

add this

.navbar-inverse .navbar-nav > li > a:hover{
 color: green;
 }

【讨论】：

好建议，但我希望所有标签都是绿色的，而不仅仅是其中一个

【解决方案5】：

“导航栏”类已经将样式应用于其中的标签。它会覆盖您的自定义样式。

CSS 被解释。首先声明的样式将被其后声明的相同样式覆盖。因此，只需更改包含样式表的顺序即可。首先是插件和框架。自定义样式排在最后。

<link rel="stylesheet" href="https://bootstrap.css" />
<link rel="stylesheet"href="mystyles.css" />

现在 mystyles.css 中的样式将覆盖插件具有相同名称的任何内容，而不是相反。

新样式应该与它们覆盖的样式具有相同的特性（除非它们有 !important）。参考（特异性）[https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity].

对于这种情况

.navbar-inverse .navbar-nav > .active > a:hover {
    color : green;
}

相对于

a {
    color : green;
}

【讨论】：

这在 Bootstrap 的选择器具有更高特异性的情况下不起作用。
啊，是的，应该添加进去

【解决方案6】：

无论使用什么框架，要确定适合的 css 规则，首先使用开发者控制台检查元素。在这种情况下，您会发现：
.navbar-inverse .navbar-nav > li > a:hover {…

问题是，你的新规则必须是 more specific 才能取代原来的规则。越具体，您的规则越具体，它就越能统治它们。

根据Mozilla Developer Network 文档，这里是一个按特异性增加的选择器类型列表。

0 — 类型选择器（例如 h1）和伪元素（例如 ::before）。
1 — 类选择器（例如 .example）、属性选择器（例如 [type="radio"]）和伪类（例如 :hover）。
2 — ID 选择器（例如，#example）。

您希望（您的页面的所有锚点？）都难以辨认，那么为了让规则不要太冗长，您可能需要在所有锚点通用的某个最顶层的祖先上添加一个id 属性！你必须有这样一个顶级容器块（也可以是 html 或 body 标签，但那会感觉很丑）......

以下是在所有代码周围添加 <div id="common-ancestor"> 时得到的结果：

#common-container a:hover{
  color: green;
}

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

<div id="common-container">
  <div class="container-fluid">
      <nav class="navbar navbar-inverse navbar-default" role="navigation">
          <div class="container-fluid">
              <!-- 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="#">Brand</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">
                      <li class="active"><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                              <li class="divider"></li>
                              <li><a href="#">One more separated link</a></li>
                          </ul>
                      </li>
                  </ul>
                  <form class="navbar-form navbar-left" role="search">
                      <div class="form-group">
                          <input type="text" class="form-control" placeholder="Search">
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                          </ul>
                      </li>
                  </ul>
              </div>
              <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
      </nav>
  </div>
  <!-- end container -->

</div>
<!-- end "#common-container"-->

小丑：
您可能听说过!important 后缀，例如color: green !important;。
通常它被用作最后的手段，例如如果您绝对确定您不需要覆盖它所应用的规则（但谁会这样做！？）并且现有规则很复杂而无法被覆盖）。
覆盖具有!important 的规则的唯一方法是编写另一个带有!important 的规则，该规则稍后将出现在您的源代码中（稍后由css 引擎解释）。
使用不当或过度使用肯定会让你彻底发疯，使用后果自负。

【讨论】：

【解决方案7】：

添加这个!important

a:hover{
  color: green !important;
}

默认情况下，它是白色的。为了覆盖它，你需要把!important

注意如果您觉得需要，请仅使用 !important 覆盖。否则，您需要将a 更改为特定的类名

【讨论】：

一旦您开始使用!important，您将继续使用它作为快速修复，然后您将被卡住，因为没有!really-important 可以覆盖它。
那么最好的方法是什么？ @理查德
正如其他答案所指出的：使选择器足够具体以具有优先级。
@Richard OK.. 说清楚，因为你的行为有点 SO.. 问题是关于如何使 a 标签在悬停时改变颜色.. 我认为我的回答最适合全局元素标签
@Stavm "编写所有代码，假设下一个维护者是一个知道你住在哪里的精神病患者"。