如何仅使用 CSS 禁用链接 [英] How to disable a link using only CSS

问题描述

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

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

解决方案

来自 这个解决方案:

[aria-current="page"] {指针事件:无；光标:默认；文字装饰:无；颜色:黑色;}

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

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

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

Is there a way to disable a link using CSS?

I have a class called current-page and want links with this class to be disabled so that no action occurs when they are clicked.

解决方案

From this solution:

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

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

For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support Internet Explorer, there is a workaround; see this answer.

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.

这篇关于如何仅使用 CSS 禁用链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！