CSS/HTML: Disable link "hover" text

Question

You know how when you have your mouse over a link, in most browsers, it shows the link in the lower left corner (aka chrome) or in the status bar? How can I disable this?

Answer 1

The only way to do this is to remove the data in 'href', and change it to a javascript onclick where you set the window.location to the url you want.

<a href="http://www.stackoverflow.com/">Go To SO</a>

becomes

<a style="cursor: pointer" onclick="javascript: window.location = 'http://www.stackoverflow.com/';">Go To SO</a>

Answer 2

another idea: use a redirector.

Set the link to your own page (aspx) and in that page you do a Response.Transfer. When using aspx, you can use attributes (in the querystring) if you like, to use it for multiple links. This way the user still knows it is a link, but can't see the actual URL when hovering.

Answer 3

I got the same issue today .. and here is a out of the box way to solve it:

Just replace the <a> with a <span> and hide the address in a hidden component,
Then use Jquery to create the page redirect / Ajax.

HTML:

  <span class="fake-link" >
        <span class="url" style="display:none;">www.my-url.com</span>
        Go to My-URL page
    </span>

Jquery:

$(function(){
    $('.fake-link').on('click', function(e){
        var url = $(this).find('.url:first').html(); 
        window.location = url;
    });
});