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?

Sounds like you're trying to do something sketchy. As far as I know there is no way to prevent this behaviour, to prevent people from trying to cover up where the link may lead. Duh. — sg3s, Mar 24 '12 at 11:34
many times you may have seen that no url is displaying when mouse hovers on that hyperlink, how is it? for security resons? — saroj, Mar 24 '12 at 11:35
Its done with th method described by Simeon. I for one don't trust sites that use that method; it's not nice, I like to know where I'm going and it's unnecessary obfuscation. — sg3s, Mar 24 '12 at 11:39

score 13 · Accepted Answer · answered Mar 24 '12 at 11:35

13

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.

answered Mar 24 '12 at 11:35

Simeon Visser

118,920
18
185
180

1

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? – saroj Mar 24 '12 at 11:38
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. – Simeon Visser Mar 24 '12 at 11:43
can you please show a demo like that? with an example so that i can test here – saroj Mar 24 '12 at 11:46
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. – Simeon Visser Mar 24 '12 at 11:50
i am new to javascript and here i am trying but no result. I hope you can write better to show a demo – saroj Mar 24 '12 at 11:55
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. – Simeon Visser Mar 24 '12 at 11:58
@SimeonVisser Can you please edit your post with full JavaScript code and html code. – YvetteLee Mar 18 '20 at 12:30
This doesn't work! What I see is `https://originURL/#`. Latest Edge browser. – wick Jul 26 '22 at 23:45

score 8 · Answer 2 · answered Dec 01 '16 at 07:32

8

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/

answered Dec 01 '16 at 07:32

vipul sorathiya

1,318
12
23

Do you mind explaining why the `setTimeout` is needed? – Matt Cremeens Apr 26 '17 at 20:45
Try without setTimeout. You realize what happen there. – vipul sorathiya Apr 27 '17 at 10:42
It is working fine without `setTimeout` and @vipulsorathiya no offence but my mind is melting because of your `if` condition. :D – RajnishCoder Feb 23 '19 at 11:47
@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 – RajnishCoder Feb 01 '20 at 13:12
@RajnishCoder There are some special code but its not visible for you. :( – vipul sorathiya Feb 03 '20 at 04:44
@vipulsorathiya I need help, I use this code but I don't want to open in new window. – YvetteLee Mar 18 '20 at 11:44
@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](https://stackoverflow.com/a/4813887/13823230). – shaan Aug 12 '20 at 12:37

score 5 · Answer 3 · answered Mar 24 '12 at 11:45

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.

Abk · Answer 4 · 2020-05-07T11:27:59.087

2

<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>

edited May 07 '20 at 11:27

answered Oct 25 '16 at 21:18

Abk

2,137
1
23
33

Robiul Hasan · Answer 5 · 2015-02-16T06:36:10.110

0

Just use onclick="location.href='#'"

edited Feb 16 '15 at 06:36

answered Feb 15 '15 at 08:18

Robiul Hasan

1
2

score 0 · Answer 6 · answered Mar 16 '19 at 09:30

0

just remove href attribute from a element. :)

answered Mar 16 '19 at 09:30

NguyenHuuThin

71
1
2

how can url be hidden in hyperlink when mouse hover

6 Answers6

Linked

Related