带有target="_blank“的链接仍受伪类影响:用户点击后悬停样式，仅限Chrome
在用户单击链接到target="_blank“链接打开第二个选项卡后，用户决定返回到上一页(到第一个选项卡)，其中用户来自当前链接。
在用户不将光标拖到文档(页面)本身之前，:hover样式效果仍然存在。
Here是一个简单的代码示例：
.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>
实际上，代码可以更简单，我刚刚在上面描述了我的情况，here是一个更基本的例子：
a:hover {
background-color: red;
}<a href="https://www.google.com" target="_blank">Google</a>
这只发生在Chrome (84.0.4147.125)上。为了让您更容易理解这个问题，我编写了screen-recording。也可能只在macOS中发生，没有检查Windows/Linux。
有没有可能以某种方式修复它，让它像其他浏览器一样工作？切换选项卡后，:hover效果立即消失，而无需等到用户将光标带到页面。
回答 2
Stack Overflow用户
发布于 2020-08-19 03:32:28
终于想明白了，如何“修复”这个问题。请在阅读此答案之前首先检查@johannchopin答案，因为我的修复涉及到开发人员试图控制悬停时的子元素的情况。
因此，我的solution将是：
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 answer之后，我发现:focus只对当前元素有效。在谷歌了一下之后，我发现有:focus-within伪类来处理当前元素和嵌套元素。然后，我添加了像.wrapper:hover:not(:focus-within) .tooltip这样的选择器，在用户聚焦时用opacity隐藏我的工具提示(在我的例子中，大多数时候都是点击一下)。
但我遇到了另一个问题，在我之前点击一次链接后，我试图执行同样的操作，但在悬停时看不到工具提示。因此，我添加了一些JavaScript，我认为它的作用非常明显。一般情况下，似乎没有纯粹的CSS解决方案。
Stack Overflow用户
发布于 2020-08-18 01:56:15
解决方法是在锚点上使用:not(:focus)选择器：
a:hover:not(:focus) {
background-color: red;
}<a href="https://www.google.com" target="_blank">Google</a>
检查jsfiddle以查看工作示例。
https://stackoverflow.com/questions/63419727
复制相似问题
腾讯云开发者
