nepsilon/how-to-disable-html-links-with-css.md

Created March 20, 2017 09:23

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/nepsilon/afee4762c8961e29caca7dcdedca8845.js"></script>
Save nepsilon/afee4762c8961e29caca7dcdedca8845 to your computer and use it in GitHub Desktop.

Download ZIP

How to disable HTML links with CSS? — First published in fullweb.io issue #92

Raw

how-to-disable-html-links-with-css.md

How to disable HTML links with CSS?

Since IE11 we can just use CSS to prevent elements to fire hover and click event. Here is how to do it:

<a href="page.html" class="off">Link</a>

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

The CSS property disabling the link is pointer-events. When set to none, its elements won’t fire any hover or click event.

For a better user experience, it is also recommended to set cursor: default, so that no hand icon will appear when hovering the links or click-able elements.