How to display pointer cursor without href

On your pages you will have links (anchors) that when a user clicks them they will be redirected to a page or an action will be triggered. And you want your users to know that. How do they know that? How do users know the difference between a simple regular text and an actionable link? Yes, they know it because they will see a pointer when they hover on actionable links. But what if those links are only for triggering some JavaScript method? You could define an href with “#” value. But when that link is clicked, although they will not be redirected to a page, the address bar will add “#” to the end of the current address. And when you click back button on your browser it will only remove the # symbol from the end of the current address, not navigate to a previous page which will negatively affect the user experience.

The proper way to display a pointer without using an href would be using css styling. You can do it in you css file or inline. Below is the inline style for displaying pointer cursor without href:


You can also add something like below to your css file:

a:hover { cursor:pointer; }

Hope this helps.
Good Luck,

Leave a Reply

Your email address will not be published. Required fields are marked *