css - 与目标 ="_blank"的链接仍然受到伪类 :hover styles after user clicked on it, 的影响，仅限 Chrome

Question

在用户点击带有 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 效果立即消失，无需等待用户将光标移动到页面。

Answer 1

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

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

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

检查 jsfiddle查看工作示例。