时间戳

首页 > 解决方案 > 有没有办法将“a”标签链接取消设置为默认颜色

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

问题描述

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

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

这是我到目前为止所尝试的：

(HTML)

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

(CSS)

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

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

该代码的JS小提琴示例here

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

标签： htmlcsshyperlinkhover

解决方案

您正在寻找的原始设置的值称为initial。

a:hover {
    color: initial
}

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

a:not(:hover){
  color: #000;
  text-decoration: none;
}
<a href="#">Hi, I'm Link.</a>

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

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

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

a:hover {color: #0000EE; text-decoration: underline; }
<a href="#">Hi, I'm Link.</a>

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

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

推荐阅读