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

Question

我修改了 links 的默认外观，通过更改特定类别下 links 的 a:hover 和 a:focus：

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

一切看起来都和我想要的一样，除了一个小行为：当我在新选项卡中打开 link 时，在 return 进入页面后我看到 link 我点击仍然显示悬停和焦点样式，即使光标不在 link 上。我必须单击 window 上的其他地方（甚至在浏览器 window 之外）才能使其消失。

我怎样才能使 link text/icon 在单击后自动 return 到它们未悬停的未聚焦状态，只需不将光标放在 link 上？

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

P.S。我正在使用 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>

Answer 2

您还需要使用 :active 选择器：

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