能否通过CSS禁用<a>链接悬停时浏览器左下角的链接预览？

浏览器左下角显示的链接地址预览是浏览器内置的原生安全UI，不属于网页DOM范畴，没有纯CSS属性可以直接禁用该效果，以下按JS依赖度从低到高提供可行实现：

方案1：零JS纯HTML实现（推荐导航栏场景使用） #

不需要保留<a>标签语义的话，用表单提交按钮替代导航链接，完全不会触发浏览器的链接预览，且无需任何JavaScript就能实现正常跳转。

1. 把导航栏原有的<a>标签替换为<form>包裹的提交按钮，示例结构：

<nav class="navbar">
  <ul>
    <li>
      <!-- action属性填写原href的跳转地址 -->
      <form action="/home" method="GET" style="display: inline; margin:0; padding:0;">
        <button type="submit" class="nav-link">首页</button>
      </form>
    </li>
    <!-- 其余导航项按相同逻辑替换即可 -->
  </ul>
</nav>

2. 把原有针对.navbar ul li a的样式迁移到按钮上，重置按钮默认样式即可完全复用原有视觉效果：

.navbar ul li .nav-link {
    /* 重置button默认浏览器样式 */
    border: none;
    background: none;
    cursor: pointer;
    /* 原有导航样式完全保留 */
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 20px;
    padding: 5px;
    border-radius: 5px;
    transition: all 0.1s ease-in-out;
}

.navbar ul li .nav-link:hover {
    color: rgb(255, 166, 0);
    background-color: rgb(85, 85, 85);
}

• 优点：完全无JS，全浏览器兼容，不会触发链接预览
• 缺点：不支持a标签原生右键菜单（如新标签页打开、拖拽存书签等），适合固定导航栏这类强交互场景

方案2：极简JS实现（保留标签语义，改动最小） #

如果需要保留<a>标签的原生交互特性，仅需不到10行JS即可实现，核心逻辑是把真实跳转地址存到自定义属性上，不让href属性携带可被浏览器识别的导航地址，从根源上避免触发预览。

1. 修改原有a标签结构，把真实地址从href移到data-href属性，href设为无实际导航效果的值：

<!-- 原有写法 <a href="/home">首页</a> -->
<a href="javascript:void(0)" data-href="/home">首页</a>
<!-- 需要新窗口打开的链接加data-target="_blank"即可 -->
<a href="javascript:void(0)" data-href="/about" data-target="_blank">关于我们</a>

2. 加一段全局事件委托的JS代码，所有带data-href的链接点击时自动跳转，不需要逐个绑定事件，把代码放在页面</body>标签前即可生效：

document.addEventListener('click', (e) => {
  const targetLink = e.target.closest('a[data-href]')
  if (!targetLink) return
  if (targetLink.dataset.target === '_blank') {
    window.open(targetLink.dataset.href)
    return
  }
  window.location.href = targetLink.dataset.href
})

3. 原有针对a标签的CSS代码完全不需要修改，可直接复用。

• 优点：改动量极小，保留a标签大部分原生交互，JS代码体量极轻
• 缺点：依赖JS运行，用户禁用JS时链接无法跳转

避坑说明 #

以下方案均为无效实现，不要尝试：

• 给a标签加pointer-events: none：会直接导致链接无法点击，无实际意义
• 清空/修改a标签的title属性：title控制的是网页层面的悬停提示框，和浏览器原生的左下角预览完全无关
• 用CSS伪元素/普通DOM元素覆盖预览区域：预览属于浏览器内核层UI，网页DOM的z-index优先级再高也无法覆盖

该预览是浏览器给用户提供的安全提示，用于明确告知用户点击后的跳转目标，建议仅在导航栏这类固定内部跳转区域使用上述方案，不要对全站所有内容链接做该处理，避免影响用户对陌生链接的安全判断。

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