如何仅使用 CSS 禁用链接

Question

有没有办法使用 CSS 禁用链接？

我有一个名为 current-page 的类，并希望禁用与此类的链接，以便在单击它们时不会发生任何操作。

原文由 RSK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 这个解决方案：

 [aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

 <a href="link.html" aria-current="page">Link</a>

有关浏览器支持，请参阅 https://caniuse.com/#feat=pointer-events 。如果您需要支持 Internet Explorer，则有一个解决方法；看到 这个答案。

警告：在 CSS 中对非 SVG 元素使用 pointer-events 是实验性的。该功能曾经是 CSS 3 UI 草案规范的一部分，但由于存在许多未解决的问题，已推迟到 CSS 4。

原文由 RSK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

 .disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

 <a href="#" class="disabled">link</a>

原文由 Amir Keshavarz 发布，翻译遵循 CC BY-SA 3.0 许可协议