禁用<a>元素的链接悬停显示

Question

当我在任何网站的元素上悬停时，我会在左下角得到一个链接。例如，当我将光标移动到Stackoverflow的标志上时，我会在角落里得到Stackoverflow的URL： 是否有可能使用css / html禁用角落中的URL？ 我在项目中使用Angular 5，因此如果有Angular功能可以实现，请告诉我。感谢答案。

- Denis Stephanov

---

我认为这是浏览器功能，并且它为用户提供了一些透明度，因此我怀疑您无法删除它。 - Thijn

@Thijn 你好，当你查看Facebook的Web Messenger时，你会发现在鼠标悬停在线程上时功能被禁用了，而线程也是<a>元素。 - Denis Stephanov

你为什么想要隐藏这个？如果有的话，拥有它反而更好。 - Ingo Bürk

@IngoBürk 这个 URL 信息在应用程序中重叠了一些内容，这些内容应该是可见的。 - Denis Stephanov

你可以只将它制作成一个带有点击处理程序的按钮，但我想指出实际链接更具可访问性和SEO友好性。 - Ingo Bürk

Answer 1

预览由浏览器渲染，您无法控制它。唯一的解决方案是使用另一个具有类似样式和功能的标签，例如：

<span class="link" onclick="window.open('http://website.com','_blank');">Website</span>

- David D.

Answer 2

您可以使用带有routerLink属性的button，当鼠标在其上悬停时，将不会显示URL。它可以这样写：

<button [routerLink]="['/register']">Sign Up</button>

- Anshuman Jaiswal

Answer 3

既然涉及到Angular，你可以这样做：

<button (click)="routeToOtherPage()">Link</button>

使用

routeToOtherPage() {
  this.router.navigate(["/other-page"]);
}

你也可以编写自己的指令来内联它，类似于这样：

@Directive({
  selector: "[clickRouterLink]"
})
export class ClickRouterLinkDirective {
  @Input()
  private clickRouterLink: any | any[];

  @HostListener("click")
  public handleLinkClicked() {
    // Crude check for whether an array has been provided.
    // You might want to make this better (or even compare with the implementation of routerLink).
    const route = this.clickRouterLink && typeof this.clickRouterLink.length === "number"
      ? this.clickRouterLink
      : [this.clickRouterLink];

    this.router.navigate(route);
  }

  constructor(private router: Router) {}
}

然后

<button clickRouterLink="events">Link</button>
<button [clickRouterLink]="['events', event.id]">Link</button>

- Ingo Bürk