how can url be hidden in hyperlink when mouse hover

Question

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.

Solution 4

<button class="class" onclick="window.location.href='https://stackoverflow.com'">Visit StackOverflow</button>

OR

<button class="class" onclick="window.location.replace('https://stackoverflow.com')">Visit StackOverflow</button>

View more solutions

Comments

[saroj]

ok but i can see that # here, nothing should be displayed e.g hover on Add Comment in this stackoverflow site, no url is shown on that hyperlink how?

[Simeon Visser]

There is no href attribute in that element here on Stack Overflow, you could try that. So when clicking, the JavaScript function should add the href attribute with the URL as value.

[saroj]

can you please show a demo like that? with an example so that i can test here

[Simeon Visser]

Well, to be fair, you asked a question as to how it was done. I'm sure you can write the JavaScript function easily as it's only one or two lines at most.

[saroj]

i am new to javascript and here i am trying but no result. I hope you can write better to show a demo

[Simeon Visser]

The JavaScript function should call: document.getElementById('id_of_the_link').setAttribute('href‌​', 'http://www.google.com'); where id_of_the_link and the URL should be modified of course.

[Matt Cremeens]

Do you mind explaining why the setTimeout is needed?

[vipul sorathiya]

Try without setTimeout. You realize what happen there.

[RajnishCoder]

It is working fine without setTimeout and @vipulsorathiya no offence but my mind is melting because of your if condition. :D

[RajnishCoder]

@vipulsorathiya hahaha!! hmmm, well if good developers getting indexOf special characters after converting value toLowerCase and leave their if conditions blank then I'm good as a very poor developer. :D

[vipul sorathiya]

@RajnishCoder There are some special code but its not visible for you. :(

[YvetteLee]

@vipulsorathiya I need help, I use this code but I don't want to open in new window.

[YvetteLee]

@SimeonVisser Can you please edit your post with full JavaScript code and html code.

[shaan]

@YvetteLee - You could use window.open(href, '_self'). I have used it and there have been no problem so far. Find this intuitive. Tested with both FF and Chrome. However there is another school of thought.