有没有办法将 'a' 标签 link 取消设置为默认颜色

Question

我有一个 'a' 标签，它是另一个网页的正常 link。

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

这是我目前尝试过的方法：

(HTML)

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

(CSS)

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

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

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

Answer 1

a:hover {
    color: initial
}

但是，这可能会使 link 变黑。这意味着在这种情况下它对您不起作用。 你可以通过另一种方式解决这个问题， 通过你的 a 风格。使用 :not 选择器使用 :hover 的反函数。

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

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

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

或者如果这在您的环境中不起作用，您可以使用 default colors:

设置 link 的样式

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

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

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

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

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

Is there a way to unset an 'a' tag link to the default color