Enable and Disable Links using only CSS

All you need to add is pointer-events property to the css class desired. None will not allow the link to fire, while auto or inherit would open the link:


a.disabled { pointer-events: none; }

a.enabled { pointer-events: auto; }


<a href=”https://rochcass.wordpress.com&#8221; class=”enabled” target=”_blank”> Enabled Link </a>
<a href=”https://rochcass.wordpress.com&#8221; class=”disabled” target=”_blank> Disabled Link </a>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s