html - 创建了一个自定义 CSS 类，想要更改链接悬停颜色但它不起作用

Question

我想弄清楚如何将一组特定链接上的链接悬停颜色更改为#666666，因此我创建了一个自定义 CSS 类。但是，效果不起作用。我尝试了一些方法，例如将类嵌套在 div 标记中，但我当前的 HTML 和 CSS 如下所示。我非常是代码的新手，因此非常感谢您的帮助。

<p style="text-align: center;">
<a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/">
<span style="color: #3fa9f5; text-align: center; font-size: 18px;">Implementation Support</span></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</p>

.supportlinks:hover {color:#666666; text-decoration:none;}

Answer 1

您在 span 上使用内联样式，因此如果您想避免使用我推荐的 !important，您将不得不摆脱内联样式。

我还建议将其他内联声明也移到您的 CSS 中，但以下示例显示了使其正常工作所需的最少重构量。

这是一个现场演示，展示了如何将内联样式提取到 CSS 规则中:

.supportlinks {color: #3fa9f5;}
.supportlinks:hover {color:#666666; text-decoration:none;}

<p style="text-align: center;">
<a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/">
<span style="text-align: center; font-size: 18px;">Implementation Support</span></a></p>

JSFiddle 版本:https://jsfiddle.net/f8dhtcz6/