导航到新标签页时，CSS：hover无法清除

问题描述

我正在开发一个符合WCAG的网站，并且我们按照WCAG网站上建议的模式实施了导航到新标签的链接。

下面是该问题的一个有效示例：（Google和IE都如此）

http://www.w3.org/WAI/WCAG20/Techniques/working-examples/G201/new-window.html

如果将鼠标悬停在链接上，然后单击，将显示新选项卡。当您单击原始选项卡时，悬停将保持打开状态，直到您单击某处为止。

我不确定这是错误还是特意设计的，但是清除它的适当WCAG方法是什么。使用Javascript可能有效，但是我对如何执行挂钩并不熟悉。

我在想悬停的过渡，它会在x秒后消失。符合WCAG可以吗？

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pop-Up Warning</title>
<style type="text/css">
body
{
margin-left:2em;
margin-right:2em;
}
:focus
{
outline: 0;
}
a.info
{
position:relative;
z-index:24;
background-color:#ccc;
color:#000;
text-decoration:none
}
a.info:hover,a.info:focus,a.info:active
{
z-index:25;
background-color:#ff0
}
a.info span
{
position: absolute;
left: -9000px;
width: 0;
overflow: hidden;
}
a.info:hover span,a.info:focus span,a.info:active span 
{
display:block;
position:absolute;
top:1em; left:1em; width:12em;
border:1px solid #0cf;
background-color:#cff;
color:#000;
text-align: center
}
div.example
{
margin-left: 5em;
}
</style>
</head>
<body>
<h1>Pop-Up Warning</h1>
<p>
This is an example of an <a  target="_blank" class="info" href="http://example.com/popup_advisory_technique.html"><strong>External link</strong><span>Opens a new window</span></a>
</p>
</body>
</html>

解决方法

根据评论，target="_blank"属性将在新标签页中打开页面，并保持当前标签页中的状态不变。您可以删除target="_blank"，然后在当前选项卡中打开页面。或者，您可以使用javascript清除点击回调中的焦点状态

<a target="_blank" onclick="this.blur();">Hello<span>Open in new window</span></a>

javascript wcag