html - 单击后重置链接状态

Question

我有一个这样的按钮:

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

当我点击它时，它会将我带到一个显示我的简历的新选项卡。但是，当我回来时，我想删除一条下划线:

我可以并且确实删除了它，因为我设置了 :focus 的样式按钮的一部分:

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

当用户试图再次将鼠标悬停在链接上时，就会出现问题。它不再悬停，因为链接仍然被“点击”；因此，当我将鼠标悬停时，文本“Resume”的颜色保持白色并且不会改变颜色，直到我单击其他地方以重置链接。如何重置 <a> 的状态不点击网站的其他部分？

Answer 1

尝试 active 和 visited 状态以涵盖所有可能性。有时链接在使用浏览器后退按钮后仍保持事件状态，并且在正常的网络浏览期间链接可能被标记为已访问。

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

链接可以有四种状态:

1. a:link - 一个普通的、未访问过的链接
2. a:visited - 用户访问过的链接
3. a:hover - 用户将鼠标悬停在链接上时的链接
4. a:active - 点击时的链接

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

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