当 target="_blank" 时，链接保持在其悬停属性上答案

【问题标题】：Link stays on its hover property when target="_blank"当 target="_blank" 时，链接保持在其悬停属性上
【发布时间】：2019-02-05 04:36:24
【问题描述】：

每当我设置一个链接以打开一个新窗口并返回到前一个窗口时，为其设置的悬停属性都会粘住，但是当我将鼠标移回窗口时，它会恢复正常。如何在不使用 Javascript 的情况下解决此问题？

HTML：

<a href="google.com" target="_blank">Google</a>

CSS：

a:link, a:visited, a:active {color: blue;}

a:hover {color: red;}

JSFiddle

http://jsfiddle.net/5EXFB/

【问题讨论】：

你有没有找到任何解决方案？

标签： html css

【解决方案1】：

我有一个类似的问题，一个按钮样式的链接在单击操作是打开一个新窗口时保持其悬停字体颜色。问题是链接保持焦点（保持悬停样式），直到您单击其他内容，这显然是可访问性的。我想出的解决方法是添加一个 :focus 样式和一个 :focus:hover 样式来模仿常规的 a 和 a:hover 样式。

a, a:focus { color: blue }
a:hover, a:focus:hover { color: white }

【讨论】：

【解决方案2】：

更新： Chrome 中似乎没有办法做到这一点。即使将焦点设置在幕后的另一个元素上也不会

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
    a:link {color: blue;}
    a:hover {color: red; background-color:yellow}
    a:active {color: red;}
    </style>
</head>
<body>
<input type='text'>Click this: </input>
<a href="http://yahoo.com" target="_blank">yahoo</a>
<script>
    $('a').click(function() {
        $('input').focus();
    });
</script>
</body>
</html>

更新：我下面的代码在 IE 或 Chrome 中不起作用。在 IE 中，当您切换回窗口时，活动焦点已经消失，而在 Chrome 中，鼠标悬停肯定会移除活动焦点。事实上，我认为一旦目标窗口打开，活动焦点就已经消失了，只是IE立即重绘，Chrome稍后重绘。

=========================

将 :active 移动到与 :hover 相同的位置：

a:link, a:visited, {color: blue;}

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

这应该适用于您描述的情况，即再次将鼠标悬停在窗口上。但是，如果您在窗口中单击，则链接将不再是活动元素，因此样式也会丢失。

【讨论】：

这似乎没有奏效。我要避免的是在单击后保持悬停属性的链接。所以在我点击链接后，我希望它恢复到原来的样式。
查看我的更新。那你在用 Chrome 测试吗？我怀疑你需要一些 javascript
是的，我在 Chrome 中。是否已经有一个线程可以使用 JS 解决此错误修复？
你必须继续挖掘。我的想法很短。
一个多月了，看看这个问题有没有进展？

【解决方案3】：

我遇到了同样的问题。 :visited 对我有用，而 :focus 没有。使用visited，它选择当前浏览器已经访问过的链接。重点是那些使用键盘导航来访问链接的人。 :focus 将选择键盘当前焦点的链接。

&:visited { color: $color--tory-blue;       
background-color: $color--white;}

&:hover{color: $color--white;       
background-color: $color--tory-blue;}

【讨论】：