Hide URL of mouse overing link

Question

UPDATE

I finally found a simple and easy way:

<font onclick="window.open('https://www.google.pt/', '_self');" style="background:0;border:0;outline:0">Link

I had to use a tag to add the event to the text so I used font because it doesn't modify anything. P.S.: This doesn't work on JS Fiddle as, for some reason, it doesn't open the link (it stays blank).

Probably duplicated but I couldn't find it so, is there any way to prevent the URL of a link to show when I move my mouse over it? Code with image of the URL:

<a href="https://www.google.pt/">Google</a>
<br>
When I over the mouse on the link, it shows the URL on the bottom left corner.
<br>
<img src="http://i.imgur.com/pq3ket7.png">
<br>
Is there any way to prevent it?
I'm using Chrome.

https://jsfiddle.net/1tbg478j/

Possible duplicate of [how can url be hidden in hyperlink when mouse hover](http://stackoverflow.com/questions/9851372/how-can-url-be-hidden-in-hyperlink-when-mouse-hover) — Patrick Evans, Jun 01 '16 at 12:50
Theres no way to do this reliable in every browser. Aswell there should **NEVER** be the need to do that - why do you wanna do that? - You can use javascript if you don't want to show where the link goes. => `onMouseOver="window.status = ''"` — Xatenev, Jun 01 '16 at 12:50
@PatrickEvans I think the solution is on the 1st answer of that link. It's not exactly but it's a trick, a way around it. — The Usual Client, Jun 01 '16 at 12:55
@Xatenev You say it should NEVER be done, however, even here on the site, the "Add Comment" button does that (doesn't show any URL but works like a link). — The Usual Client, Jun 01 '16 at 12:56
@TheUsualClient, maybe in Firefox, but in Chrome if you hover over "add comment" you get `...-overing-link#` in the status bar. — Patrick Evans, Jun 01 '16 at 12:58

score 0 · Answer 1 · answered Jun 01 '16 at 12:49

0

It's uncontrolled browser behavior.
You can convert it to a div, attach a click event listener an open the wanted url in the callback function.

answered Jun 01 '16 at 12:49

Sharon Haim Pour

6,595
12
42
64

Sorry, I don't like limitations. – The Usual Client Jun 01 '16 at 13:03
Of not being able to control that with a simple attribute. – The Usual Client Jun 01 '16 at 13:07

Chris · Accepted Answer · 2016-06-01T13:16:12.410

0

The JSFiddle broke so I will just paste all the code here. Please note that the links won't work in JSFiddle because they do not allow window.location but it will work in your website.

HTML:

<a class="no-href" data-location="https://www.google.pt">Google</a><br />
<a class="no-href" data-location="https://www.google.com">Link 2</a><br />
<a class="no-href" data-location="https://www.google.co.za">Link 3</a><br />
<a href="https://www.google.pt/">Normal Link</a><br />
<br>
When I over the mouse on the link, it shows the URL on the bottom left corner.
<br>
<img src="http://i.imgur.com/pq3ket7.png">
<br>
Is there any way to prevent it?
I'm using Chrome.

JS:

$('.no-href').click(function(e){
    e.preventDefault();
    window.location = $(this).attr('data-location');
});

CSS:

.no-href {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

edited Jun 01 '16 at 13:16

answered Jun 01 '16 at 12:54

Chris

987
6
24

A little bit trick but it works. Thanks! ...and to the others saying it's impossible, just don't... – The Usual Client Jun 01 '16 at 13:00
The Jquery will work for all the links, so if you have other links on the page you might want to only select a certain class, not all of them, otherwise your other links won't work. Other than that you should be golden. – Chris Jun 01 '16 at 13:02
@Chris Does it have to open the link in another tab? – The Usual Client Jun 01 '16 at 13:05
It is useful if you are building an app. – Chris Jun 01 '16 at 13:06
No it can work like a normal link. I will add another link in my answer, give me a minute. – Chris Jun 01 '16 at 13:08
@Chris If you provide the code of 2 working links without the URL and the new tab, I can do the rest (on my code). – The Usual Client Jun 01 '16 at 13:14
@TheUsualClient It is because your script is loading before the elements exist. Your code should be inside this: $(function(){ // Code Here }); – Chris Jun 01 '16 at 14:23
@Chris So, instead of writting my HTML code I do it all in JavaScript? I'm a little confusing, can you help me get it working please. – The Usual Client Jun 01 '16 at 14:36
@Chris I found a way, I'm gonna update my original question. – The Usual Client Jun 01 '16 at 15:31

score 0 · Answer 3 · answered Jun 01 '16 at 12:58

0

Simply add it to OnClick like this:

<a href="javascript:;" onclick="location.href='https://www.google.pt/'">Google</a>

Hope it helps you.

answered Jun 01 '16 at 12:58

Nestoraj

722
2
6
19

score -1 · Answer 4 · answered Jun 01 '16 at 12:51

-1

According to this it cant be done : https://productforums.google.com/forum/?hl=en#!category-topic/chrome/discuss-chrome/FtD7qjochgw

answered Jun 01 '16 at 12:51

CHS

173
1
1
8

Hide URL of mouse overing link

4 Answers4