如何使用 CSS 禁用链接？

Question

Is there any 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.

转载于:https://stackoverflow.com/questions/2091168/how-to-disable-a-link-using-only-css

Answer 1

The answer is already in the comments of the question. For more visibility, I am copying this solution here:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support IE 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 CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

</div>