有没有办法将“a”标签链接取消设置为默认颜色

Posted 2023-03-25

【中文标题】有没有办法将“a”标签链接取消设置为默认颜色

【英文标题】：Is there a way to unset an 'a' tag link to the default color

【发布时间】：2020-12-30 03:25:14

【问题描述】：

我有一个“a”标签，它是指向另一个网页的普通链接。

我想禁用默认链接外观，除非鼠标光标悬停在链接上，此时应该恢复默认的正常链接外观。

这是我迄今为止尝试过的：

(html)

   <a href="example.com">example</a>

(CSS)

a 
    color: #000;
    text-decoration: none;


a:hover 
    color: unset;
    text-decoration: underline;

JS fiddle example of that code here

问题是在鼠标悬停期间链接颜色保持黑色，并且不会取消设置或恢复为原始链接蓝色。是否有用于“原始设置”或类似内容的特殊 CSS 关键字？

【参考方案1】：

value for original setting you're looking for 被称为initial。

a:hover 
    color: initial

但是，这可能会使链接变黑。这意味着在这种情况下它对你不起作用。 不过，您可以通过 a 风格解决此问题。使用 :not 选择器使用 :hover 的倒数。

a:not(:hover)
  color: #000;
  text-decoration: none;

<a href="#">Hi, I'm Link.</a>

它的工作方式是将样式应用于您的链接，只要它不是悬停效果。单独a 也会设置:hover 的样式，这是我们不想要的。

或者，如果这在您的环境中不起作用，您可以使用 default colors 设置链接样式：

a  color: #000; text-decoration: none; 

a:hover color: #0000EE; text-decoration: underline; 

<a href="#">Hi, I'm Link.</a>

这应该适用于任何地方，因为它是一种常规的颜色变化。但是，请注意，默认颜色可能会因浏览器而略有不同……这样做的好处是颜色在所有浏览器中都保持相同，我猜。

中间一段代码和最后一段代码的区别在于，中间一段使用默认浏览器设置，而最后一段则推入你自己的蓝色。

【讨论】：

这是有道理的，看起来符合最新标准，但它在我的开发测试或 JSFiddle 中不起作用。我认为它将初始应用于悬停情况并将链接颜色恢复为普通的非悬停 CSS 黑色。

@stackuser83 看看中间那个，它可能对你有用:)

not(:hover) 很聪明，@Martin，可以解决问题。我的想法是支持用户样式表，我现在意识到自 v33 以来 Chrome 不支持它，尽管有一些扩展可以重新启用该功能。谢谢！