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

Posted 2023-05-08

【中文标题】单击外部链接后悬停效果仍然存在

【英文标题】：Hover effects remain after clicking external link

【发布时间】：2015-12-07 02:49:19

【问题描述】：

当我将鼠标悬停在主页上的可点击链接上时，样式会按预期更改（即边框变为蓝色或链接具有文本装饰）。但是，当我单击链接以在新窗口中打开时（它设置了 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。

希望有其他想法。谢谢。

【参考方案1】：

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

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

【讨论】：

你的意思是......a:hover, a:focus border-bottom: 1px solid blue; 我什至尝试在我阅读的其他帖子中添加outline: none;，但它不起作用。

只需删除a:focus。当您单击支持焦点的元素时，它会成为焦点。因此，悬停或关注链接会使其样式类似于悬停。

感谢您的回复。我删除了一个链接的a:focus，它有效，但页眉链接和页脚链接没有a:focus。我什至在整个代码库中搜索:focus，这些部分没有任何继承形式。我会继续玩弄它。再次感谢。