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

Question

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

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

以下是我尝试过的一些方法:

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

a:hover, a:focus {
border-bottom: 1px 纯蓝色;
}

• 我试过使用 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;
}