Question

每当我设置一个链接打开到一个新窗口并返回到前一个窗口时，为它设置的悬停属性就会粘住，但是当我鼠标回到窗口时它会恢复正常。如何在不使用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/

Answer 1

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

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

Answer 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;}

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

Answer 3

我有同样的问题。：visited对我有用，而：focus却没有。使用访问后，它将选择当前浏览器已经访问过的链接。焦点针对使用键盘导航来获得链接的用户。：focus将选择作为键盘当前焦点的链接。

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

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

当target =“_ blank”时，链接停留在其悬停属性上

3 个答案: