需要帮助在 h2 中获取超链接以在悬停时更改颜色答案

【问题标题】：Need help getting a hyperlink in an h2 to change color on hover需要帮助在 h2 中获取超链接以在悬停时更改颜色
【发布时间】：2017-08-20 06:29:45
【问题描述】：

我在 div 中有一个 h2，而 h2 本身就是一个链接。链接已经以一种颜色显示（下面的代码示例）

       <div>
        <h2 class="className">
            <a href="#" style="color: #006BA6;">Title</a></h2>
       </div> 

    .className
    {
        color: #006BA6;
        font-size: 20px;
        padding-left: 14px;
    }

我需要做的是，当我将鼠标悬停在 h2 链接“标题”上时，颜色将变为另一种颜色。我到处搜索，但还没有找到成功的方法来做到这一点。

我尝试过这样的事情：

h1, h2, h3{
    a{
         color:#d99a30 !important;
         &:hover{ color:#37404e !important;}
      }
}

还有一些其他选项，包括 h2 的新类和链接的新类，但没有任何效果。任何提示将不胜感激！

编辑：我想花一点时间为可能提出重复的问题道歉。我无意因为搜索不够彻底而浪费任何人的时间。我对 CSS 仍然非常、非常新手，并且在我进行的过程中会弄明白一些事情。我正在使用的许多代码都是预先存在的，所以我担心小的更改会在整个站点中造成大的更改。感谢大家的帮助、建议和教程/文档链接。在提出问题之前，我一定会在未来更加彻底。

【问题讨论】：

您使用的是 less 或 sass 还是某种 CSS 预处理器？如果是这样，请更新您问题的标签。
你好康拉德，欢迎来到 Stack Overflow。我并不是要粗鲁，但看看你的 CSS 似乎你缺乏一些非常基本的知识。在来这里之前，您是否真的阅读了一些教程和/或文档？另外，请快速查看"How do I ask a good question?"
How to use 'hover' in CSS的可能重复
嘿 @domdom 我对 CSS 非常非常陌生。我的公司基本上把我扔进去并说“嘿，这样做。”我花了几个小时浏览文档，因为这是对一个特定链接的更改，无论我是不擅长搜索还是没有使用正确的术语，我都找不到我要找的东西。你上面链接的问题甚至没有出现。感谢您的 cmets 以及您发布的问题。我一定会看的！
这是有道理的。我推荐 MDN's CSS tutorial area 了解一些基础知识，当然还有很多其他 CSS 教程。

标签： html css

【解决方案1】：

试试：

    .className
    {
        color: #006BA6; /*General color for text in this class*/
        font-size: 20px;
        padding-left: 14px;
    }
    
    .className a{
        color: red; /*Color for hyperlinks in this class*/
    
    }
    
    .className a:hover{ /*:hover selector is self-explanatory :)*/
        color: green;
    }

     <div>
        <h2 class="className">
            <a href="#">Title</a></h2>
       </div>

补充说明：

除非你现在在做什么，否则不要使用“！important”
转到https://www.w3schools.com/css/ 并提高您对 CSS 基础知识的了解

【讨论】：

我认为将学习者引导到 MDN 这样的资源而不是 w3schools 会更好，因为 meta.stackoverflow.com/questions/280478/why-not-w3schools-com

【解决方案2】：

为什么你的链接没有自己的类？只需删除链接中的样式属性，您的 html 将如下所示：

<div>
  <h2 class="className">
    <a href="#" class="link">Title</a>
  </h2>
</div>

然后添加如下样式表：

.className
{
    color: #006BA6;
    font-size: 20px;
    padding-left: 14px;
}

.link
{
    color: #006BA6;
}

.link:hover
{
    color: #37404e;
}

所以你的类名设置了Title的颜色，但是链接的颜色会被链接覆盖，而且链接有自己的hover，会覆盖普通链接的颜色。

【讨论】：

【解决方案3】：

请复习您的基本 HTML/CSS 知识并阅读 how to ask a good question。暂时，看看这个：

h2 a {
  color: #006BA6;
}

h2:hover a {
  color: #ff0000;
}

<div>
  <h2>
    <a href="#">Title</a>
  </h2>
</div>

请注意，我删除了 a 元素的内联样式，因为内联样式始终优先于来自 style 部分或外部样式表的样式。另外，这被认为是不好的做法。

还要注意h2 a:hover 也可以。不同之处在于，当您将鼠标悬停在h2 上的任意位置时，我选择的那个会改变您的a 的颜色，而后者只会在您将a 实际悬停在h2 内时触发。

【讨论】：