Make a hyperlink unclickable with css

Question

I was wondering is there could be a trick in Css3 how to make a hyperlink loose its function, simply put, to disable the on click function ( so that it appears like a normal hyperlink but has no function like a paragraph) ?

Answer 1

<a href="http://example.com" class="inactive">Link</a>

.inactive {
   pointer-events: none;
   cursor: default;
}

The cursor:default property is if you want the cursor to be just an arrow. If you want it to act like a link (with the "hand" cursor), then remove it.

Answer 2

CSS only solution is not cross browser supported at current time. But it is possible using pointer-events: none;

a.disabled {
  pointer-events: none;
}

And there is no need to set disabled link cursor to default, cause links with pointer-events: none; has default cursor already.