如何禁用<a>元素hover时左下角显示的链接？

好问题！这个浏览器左下角的链接预览是浏览器自带的安全提示功能，用来让用户提前知道点击后会跳转到哪个地址，所以没法直接用纯CSS彻底禁用它，但我们可以用一些小技巧来绕过这个显示效果，下面给你几种可行的方案：

一、HTML/CSS 层面的解决方案 #

1. 用 pointer-events: none + 手动绑定点击事件 #

思路是先让 <a> 元素不触发浏览器的原生链接识别，再手动实现跳转逻辑，这样浏览器就不会弹出左下角的URL预览了。

示例代码：

<style>
  .no-preview-link {
    pointer-events: none; /* 让浏览器不把它当成可点击链接 */
    position: relative;
    /* 保留链接的视觉样式 */
    text-decoration: underline;
    color: blue;
    cursor: pointer;
  }
</style>

<a href="https://example.com" class="no-preview-link" id="customLink">不会显示预览的链接</a>

<script>
  document.getElementById('customLink').addEventListener('click', function(e) {
    e.preventDefault();
    window.location.href = this.getAttribute('href');
  });
</script>

2. 用非<a>元素模拟链接 #

如果不需要<a>标签的语义化特性，直接用<span>或<div>模拟链接，通过点击事件实现跳转，浏览器完全不会识别成链接，自然就不会显示预览。

示例代码：

<style>
  .fake-link {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
  }
</style>

<span class="fake-link" onclick="window.location.href='https://example.com'">模拟链接（无预览）</span>

⚠️ 注意：这种方法会损失<a>标签的语义化，对SEO和无障碍访问不太友好，需要根据场景权衡使用。

二、Angular 5 专属优雅方案 #

结合Angular的特性，我们可以用更符合框架风格的方式实现：

1. 自定义指令统一处理 #

可以写一个通用指令，复用在所有需要禁用预览的链接上：
首先通过Angular CLI生成指令（Angular 5命令：ng generate directive noLinkPreview），然后修改指令代码：

import { Directive, HostListener, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appNoLinkPreview]'
})
export class NoLinkPreviewDirective {
  @Input() href: string;

  constructor(private el: ElementRef) {
    // 禁用原生指针事件，阻止浏览器识别为链接
    this.el.nativeElement.style.pointerEvents = 'none';
    // 保留链接视觉样式
    this.el.nativeElement.style.textDecoration = 'underline';
    this.el.nativeElement.style.color = 'blue';
    this.el.nativeElement.style.cursor = 'pointer';
  }

  @HostListener('click') onClick() {
    if (this.href) {
      window.location.href = this.href;
    }
  }
}

然后在模板中使用：

<!-- 用span模拟链接 -->
<span appNoLinkPreview href="https://example.com">Angular 无预览链接</span>

<!-- 保留a标签的写法 -->
<a appNoLinkPreview href="https://example.com">Angular 无预览a标签</a>

2. 直接用Angular事件绑定处理 #

如果不想写指令，也可以在模板中直接处理：

<a 
  href="https://example.com" 
  (click)="handleLinkClick($event, 'https://example.com')"
  style="pointer-events: none;"
>
  直接处理的链接
</a>

然后在组件类中添加方法：

handleLinkClick(event: Event, url: string) {
  event.preventDefault();
  window.location.href = url;
}

重要提醒 #

这种方法本质是绕过浏览器的原生安全特性，可能会让用户困惑（无法提前知晓跳转目标），所以如果不是特殊业务需求，不建议这么做——毕竟这个预览是浏览器用来防范钓鱼链接的重要提示。只有在内部系统、明确不需要用户知晓跳转地址的场景下，才适合使用这些方案。

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