单击外部链接后悬停效果仍然存在

Question

当我将鼠标悬停在主页上的可点击链接上时，样式会按预期更改（即边框变为蓝色或链接具有文本装饰）。但是，当我单击链接以在新窗口中打开时（它设置了 target=_blank 或者如果我 command + click 链接），该链接的样式会一直存在，直到我单击页面上的其他位置。

为什么样式没有立即恢复？

以下是我尝试过的一些事情：

• a, a:link, a:active 设置为 text-deocration: none;。在悬停时，我放置了一个底部边框，而不是将 text-deocration 更改为下划线。

a:hover, a:focus { border-bottom: 1px solid blue; }

• 我尝试过使用a, a:visited，但是当我阅读时，我无法更改text-decoration。 https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

• 我已确保 Google Analytics 跟踪返回 true，并且它不会停止事件传播。

请注意，我正在使用 Bootstrap。

希望有其他想法。谢谢。

Answer 1

当您单击链接时，它会成为焦点。更改您的第二个 CSS 规则以删除 a:focus。

a:hover {
    border-bottom: 1px solid blue;
}