CSS/HTML: Disable link "hover" text

You know how when you have your mous开发者_Python百科e 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?

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>

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.

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;
    });
});

Change the onclick event:

<a href="#" id="linkid">Link</a>

<script type="text/javascript">
function changeOnClick()  {
    document.getElementById("linkid").onclick=function(e) {
        location.href="http://www.your-site.com";
        return false;
    }
}
window.onload=changeOnClick;
</script>

You can change the "#" to whatever you want the status bar to show.