如何隐藏/修改鼠标悬停a标签时浏览器左下角URL显示（仿Google）

要实现像Google搜索结果那样——悬停时显示目标URL，点击/复制时实际使用中转链接的效果，你之前尝试的两种方案都存在局限性：

• JS修改window.status的方式已被Chrome、Firefox等主流浏览器禁用，无法生效
• CSS的::after伪元素无法控制浏览器左下角的原生状态栏，这属于浏览器安全机制范畴，CSS无权干预

正确的实现思路 #

Google的核心逻辑是把「视觉显示的链接」和「实际跳转/复制的链接」分离，用前端交互模拟原生a标签的体验，同时接管跳转和复制行为。以下是两种可行的实现方式：

方法1：用容器模拟链接（推荐）

用非a标签的元素模拟可点击的链接样式，完全接管交互逻辑：

<!-- 视觉上是链接，实际点击跳转中转链接 -->
<span class="fake-link" data-target="https://example.com" data-jump-url="https://your-domain.com/redirect?url=https%3A%2F%2Fexample.com">
  示例链接
</span>

<style>
.fake-link {
  color: #1a0dab;
  text-decoration: underline;
  cursor: pointer;
}
.fake-link:hover {
  color: #b00;
}
</style>

<script>
const fakeLinks = document.querySelectorAll('.fake-link');
fakeLinks.forEach(link => {
  // 点击跳转中转链接
  link.addEventListener('click', () => {
    window.location.href = link.dataset.jumpUrl;
  });

  // 处理复制：让用户复制的是中转链接
  link.addEventListener('copy', (e) => {
    e.preventDefault();
    e.clipboardData.setData('text/plain', link.dataset.jumpUrl);
  });
});
</script>

方法2：改造原生a标签

如果必须使用原生a标签，可将href设为要显示的目标URL，然后阻止默认跳转行为，手动转向中转链接：

<a href="https://example.com" class="custom-link" data-jump-url="https://your-domain.com/redirect?url=https%3A%2F%2Fexample.com">
  示例链接
</a>

<script>
const customLinks = document.querySelectorAll('.custom-link');
customLinks.forEach(link => {
  // 阻止默认跳转，改用中转链接
  link.addEventListener('click', (e) => {
    e.preventDefault();
    window.location.href = link.dataset.jumpUrl;
  });

  // 覆盖复制行为
  link.addEventListener('copy', (e) => {
    e.preventDefault();
    e.clipboardData.setData('text/plain', link.dataset.jumpUrl);
  });
});
</script>

关键说明 #

• 浏览器状态栏显示的是a标签href属性的内容，因此使用原生a标签时，若要悬停显示目标URL，直接将href设为目标地址即可，再通过JS拦截跳转逻辑
• 复制链接的逻辑必须单独处理，否则用户复制的会是href中的内容，而非预设的中转链接
• 这种实现方式完全符合浏览器安全机制，不会被判定为恶意行为

内容的提问来源于stack exchange，提问作者Mehul Kumar