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

基础概念

target="_blank" 是 HTML 中的一个属性，用于指定链接在新窗口或新标签页中打开。伪类（如 :hover）是 CSS 中的一种选择器，用于定义元素在特定状态下的样式。

类型与应用场景

类型：target="_blank" 主要用于 <a> 标签。
应用场景：适用于需要在新窗口或新标签页中打开的外部链接、帮助文档、下载页面等。

问题描述与原因

在 Chrome 浏览器中，带有 target="_blank" 的链接在用户点击后仍然会受到伪类（如 :hover）的影响，这可能导致用户体验上的不一致。

原因分析

Chrome 浏览器在处理 target="_blank" 链接时，会在新标签页打开链接的同时保留原页面上的鼠标悬停状态。这是因为浏览器默认行为是将鼠标事件保留在原页面上，直到新页面完全加载。

解决方案

方法一：使用 JavaScript 阻止默认行为

可以通过 JavaScript 在点击链接时移除伪类样式，从而避免悬停样式的持续显示。

<a href="https://example.com" target="_blank" onclick="removeHover(this)">Example</a>

<script>
function removeHover(link) {
    link.style.pointerEvents = 'none';
    setTimeout(() => {
        link.style.pointerEvents = '';
    }, 300); // 延迟恢复鼠标事件，确保新页面已加载
}
</script>

方法二：使用 CSS 解决

通过 CSS 设置链接在新标签页打开时的样式，避免悬停样式的持续显示。

a[target="_blank"]:hover {
    pointer-events: none;
}

示例代码

以下是一个完整的示例，展示了如何使用 JavaScript 和 CSS 解决这个问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Target Blank Example</title>
    <style>
        a[target="_blank"]:hover {
            pointer-events: none;
        }
    </style>
</head>
<body>
    <a href="https://example.com" target="_blank" onclick="removeHover(this)">Example</a>

    <script>
        function removeHover(link) {
            link.style.pointerEvents = 'none';
            setTimeout(() => {
                link.style.pointerEvents = '';
            }, 300);
        }
    </script>
</body>
</html>

通过上述方法，可以有效解决 Chrome 浏览器中带有 target="_blank" 的链接在点击后仍然受伪类影响的问题。