点击后重置链接状态

Question

我有一个按钮，如下所示：

当我将鼠标悬停在上面时，它看起来像这样：

当我单击它时，它会带我到一个新的选项卡，显示我的简历。但是，当我回来时，有一个下划线，我想要移除它：

我可以并且已经移除了它，因为我对按钮的:focus部分进行了样式设置：

.resume-button:focus {
    text-decoration: none;
    color: #FFFFFF;
}

当用户再次尝试悬停在链接上时，问题就出现了。由于链接仍然处于“点击”状态，因此当我悬停时，“简历”文本的颜色仍然保持为白色，并且在我点击其他地方以重置链接之前，它不会改变颜色。如何在不单击网站的其他部分的情况下重置的状态？

- patrickhuang94

Answer 1

尝试使用活动状态和已访问状态来覆盖所有可能性。有时在使用浏览器后退按钮后，链接仍然保持活动状态，而在正常的网页浏览过程中，链接可能被标记为已访问。

a:active, a:visited {
color: #fff;
}

链接可以有四种状态：

1. a:link - 一个正常的、未访问的链接
2. a:visited - 用户已经访问过的链接
3. a:hover - 当用户将鼠标悬停在链接上时出现的链接
4. a:active - 在点击链接时出现的链接

这些是伪类，应按照指定顺序声明它们，因为在时间轴上它们只能一个接一个地发生。

人们倾向于认为一些快捷方式有助于记住正确的顺序，例如：LoVeHAte。

- cssBlaster21895

---

当我再次悬停时，文本的颜色显示正常。但是当我没有悬停时，链接的默认蓝色显示出来了。我该如何将其更改为显示白色？我尝试在:focus中添加color: #FFF，但这并不起作用。 - patrickhuang94

请不要争吵，谢谢你提供的链接状态。它很有帮助，而且顺序确实很重要。 - patrickhuang94

Answer 2

请使用:active选择器。 :focus是被选中的元素，:active是被按下的元素。

- Dimava

Answer 3

您要查找的是:visited。

a:visited{ /*styles */}

使用:link选择器来为链接到未访问页面的链接设置样式， 使用:hover选择器来为鼠标悬停时的链接设置样式， 使用:active选择器来为点击链接时的链接设置样式。

- I wrestled a bear once.