有没有一种方法可以将 'a' 标签链接取消默认颜色？

Question

4

我有一个'a'标签，它是指向另一个网页的普通链接。除非鼠标指针悬停在链接上，否则我想禁用默认的链接外观，当鼠标指针悬停在链接上时，应恢复默认的普通链接外观。到目前为止，这是我尝试过的: （HTML）

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

（CSS）

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

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

问题在于，当鼠标悬停在链接上时，链接颜色仍然保持为黑色，并没有恢复到原始的蓝色链接。是否有一种特殊的 CSS 关键字可以表示“原始设置”或类似的东西？

- stackuser83

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Morgosus · Accepted Answer

您需要查找的原始设置值称为initial，详见此处。

a:hover {
    color: initial
}

然而，这可能会使链接变成黑色，这意味着在这种情况下无法正常工作。但是，您可以通过样式的方式绕过此问题。使用 :not 选择器来使用反向 :hover。

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>

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

中间代码和最后一个代码之间的区别是，中间代码使用默认的浏览器设置，而最后一个代码插入了您自己的蓝色。