how can url be hidden in hyperlink when mouse hover

How can I hide URL from displaying when mouse hovers on a hyperlink?

<a href="url">Hyperlink</a>

How can I hide URL from displaying in browser's bottom status bar when mouse hovers?

Solution 1:

Don't put the URL in the href (or keep it href="#") and attach a JavaScript function to the onclick event which puts the actual link in the a element. This way you won't see the actual URL when hovering over the link but the link will be inserted when the user actually clicks.

Solution 2:

This way you can easily hide url when mouse hover on hyperlink.

Simply add one id on anchor link.

HTML

<a href="url" id='no-link'>Hyperlink</a>

Jquery code

$(document).ready(function () {
      setTimeout(function () {

            $('a[href]#no-link').each(function () {
                var href = this.href;

                $(this).removeAttr('href').css('cursor', 'pointer').click(function () {
                    if (href.toLowerCase().indexOf("#") >= 0) {

                    } else {
                        window.open(href, '_blank');
                    }
                });
            });

      }, 500);
});

Here is demo link https://jsfiddle.net/vipul09so/Lcryjga5/

Solution 3:

you technically have window.status to make custom status bar messages. you can set it during an "onmouseover" event for that element and set the window.status to a blank string.. thats how we did it a long time ago however..

browsers these days prevent the modification of the status bar by default (as far as i know, firefox prevents it). so there is no guarantees as to this approach will do anything at all.