html - 自动返回链接的预悬停和预聚焦状态

Question

我通过更改特定类别下的链接的 a:hover 和 a:focus 来修改链接的默认外观:

.myclass > a:hover, a:focus {
    color: limegreen;
}

一切看起来都与我想要的一模一样，除了一个小行为:当我在新选项卡中打开链接时，返回页面后，我看到我单击的链接仍然显示悬停和焦点样式，即使光标不在链接上。我必须单击窗口上的其他位置(甚至浏览器窗口之外)才能使其消失。

如何让链接文本/图标在点击后通过简单地将光标不在链接上而自动返回到其未悬停的未聚焦状态？

我希望这可以在不借助 JavaScript 的情况下完成。

附注我正在使用 Bootstrap v.3.3.4。

P.P.S。已经尝试使用 a:active，但这没有帮助。

Answer 1

使用a:active代替:focus

a:hover, a:active {
    color: limegreen;
}

<a href="#">try me</a>