与 target= 的链接 "_blank" 用户点击后仍受伪类 ：悬停样式的影响，仅限 Chrome

Question

用户点击链接后，target=&quot_空白"；链接打开第二个选项卡，然后用户决定使用当前链接返回到用户所在的上一页(第一个选项卡(。

直到用户不将光标拖动到文档(页面(本身的那一刻，:hover样式效果仍然存在。

下面是一个简单的代码示例：

.wrapper {
position: relative;
}
.wrapper:hover .tooltip {
transition: 'opacity 0.5s step-end';
opacity: 1;
}
.tooltip {
position: absolute;
height: 20px;
background-color: black;
opacity: 0;
color: white;
padding: 5px 10px;
border-radius: 5px;
opacity: 0;
}

<div class="wrapper">
<a target="_blank" href="https://www.google.com/">Google</a>
<div class="tooltip">
Tooltip
</div>
</div>

实际上，代码可以更容易，我刚才描述了我的例子，这里有一个更基本的例子：

a:hover {
background-color: red;
}

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

只有Chrome(84.0.4147.125(才会出现这种情况。为了让你更容易理解这个问题，我做了屏幕录制。也可能只在macOS中发生，而不是在Windows/Linux上检查。

有可能以某种方式修复它并使其像其他浏览器一样工作吗？切换选项卡后，:hover效果立即消失，而无需等待用户将光标带到页面。

Answer 1

解决方法是在锚点上使用:not(:focus)选择器：

a:hover:not(:focus) {
background-color: red;
}

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

查看jsfiddle以查看工作示例。

Answer 2

终于想通了，如何"修复"；这在阅读这个答案之前，请先检查@johannchopin的答案，因为我的修复与开发人员试图在悬停时控制子元素的情况有关。

因此，我的解决方案是：

const onMouseEnter = () => {
document.querySelector('a').blur()
}
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'visible') {
document.addEventListener('mouseenter', () => {
onMouseEnter()
document.removeEventListener('mouseenter', onMouseEnter)
})
}
});

.wrapper {
position: relative;
}
.wrapper:hover:not(:focus-within) .tooltip {
transition: opacity 0.5s step-end;
opacity: 1;
}
.tooltip {
position: absolute;
height: 20px;
background-color: black;
opacity: 0;
color: white;
padding: 5px 10px;
border-radius: 5px;
opacity: 0;
}

<span class="wrapper">
<a target="_blank" href="https://www.google.com/">Google</a>
<div class="tooltip">
Tooltip
</div>
</span>

让我解释一下我在这里做了什么。在我阅读了@johannchopin的答案后，我发现:focus只适用于当前元素。在谷歌上搜索了一点之后，我发现pseudo类中有：焦点，用于处理嵌套元素的当前AND。然后，我添加了像.wrapper:hover:not(:focus-within) .tooltip这样的选择器，以在用户聚焦时用opacity隐藏我的工具提示(在我的情况下，大多数时候都是点击(。

但我遇到了另一个问题，在我尝试执行相同的操作后，悬停时工具提示不可见。所以，我添加了一些JavaScript，我认为它的作用非常清楚。一般来说，似乎并没有纯粹的CSS解决方案。