Code Snippet
There may come a time when you have an HTML text link that needs to be temporarily disable for some reason (perhaps it’s auto-created by a CMS, but the page is not yet finished).
In the following, we have an auto-generated link, but we want to remove the link temporarily because the source is not yet ready for viewing.
<a class="sidebar_link" href="mylink.html">My Link</a>In this case, we have a class attached to the element. Referencing the class, we can use the pointer-events property set to none, which will keep the link from responding to cursor or touch events. Now the link won’t work.
.sidebar_link {
pointer-events: none;
text-decoration: line-through;
}If you really want to keep things neat and tidy, you may want to have a CSS style setup just for disabling links (if you do that a lot). You could then use JavaScript to place the .disabled class on any link you want to disable.
<a class="sidebar_link disabled" href="mylink.html">My Disabled Link</a>.disabled {
pointer-events: none;
text-decoration: line-through;
color: black;
}Example
My Disabled Link
CSS Notes:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.