CSS：导航到新选项卡时悬停不会清除

Question

我正在开发一个符合 WCAG 标准的网站，并且我们实现了 link 可以按照 WCAG 网站上建议的模式导航到新选项卡。

下面是该问题的工作示例：（Google 和 IE）

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

如果将鼠标悬停在 link 上然后单击，则会出现新选项卡。当您在原始选项卡上单击返回时，悬停将保持打开状态，直到您单击某处。

我不确定这是错误还是设计使然，但清除它的适当 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>

Answer 1

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

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

CSS：导航到新选项卡时悬停不会清除

CSS :hover is not clearing when navigating to a new tab

javascript

css

wcag