Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide link information at the bottom left/right of the browser on hover

Tags:

html

hyperlink

How can I create a link that doesn't show its information at the bottom left or right (this depends on the link's position) when you hovering a hyperlink? Lets say that we have a link like this:

 <a href="/users">Users</a>

and we want to hide its information or more precisely its hyperlink information that's displayed at the bottom left corner of the browser, like the example on the image below:

Now, I know this is possible because Stack Exchange network sites itself uses this for the "Welcome Banner" displayed on the front page for the very first time you visit each site.

If you hover any of the links:

  • Anybody can ask a question

  • Anybody can answer

  • The best answers are voted up and rise to the top

You'll see that no hyperlink information is displayed. Check out image below to see "Welcome Banner"

like image 667
Chun Avatar asked May 23 '15 08:05

Chun


People also ask

How do I hide links in my browser?

Change the "display" or "visibility". Changing your visibility to "hidden" will hide the link without influencing the page layout. Your code for this stage should simply look like: display: none. visibility: hidden.

How do you make a link invisible?

Use CSS styling to make your links invisible The first way is by using none as the pointer-events CSS property value. The other is by simply coloring the text to match the background of the page. Neither method hides the link if someone inspects the HTML source code.


2 Answers

Remove the href="whatever" from the link and open link by calling a function. This completely removes the link preview on the bottom left of the page.

HTML-

<a (click)="openUrl('https://google.com')">

JS-

  openUrl(url: string): void {
    window.open(url, '_blank');
  }
like image 88
Rinkal Agrawal Avatar answered Sep 27 '22 19:09

Rinkal Agrawal


It cannot be done with pure html and css. You would have to use javascript for this. Showing the link of an anchor tag is just how most browsers work. Also the user expects to be able to see where he will be redirected.

But it can be done: you can avoid using an anchor tag. Then have another attribute hold the href - like "data-href". Then bind a click event on the a tag that redirects based on this attribute.

I would however, not do this - as I am uncertain if crawlers would see the link.

This is how it can be done, but note that snippets cannot redirect outside SO :)

var aTags = document.querySelectorAll('span[data-href]');

for(var i = 0; i < aTags.length; i++){
    var aTag = aTags[i];
    aTag.addEventListener('click', function(e){
        var ele = e.target;
        window.location.replace(ele.getAttribute('data-href'));
    });    
}
span[data-href]{
    cursor:pointer;
}
<span data-href="http://www.google.com">test</span>
like image 45
Peter Rasmussen Avatar answered Sep 27 '22 20:09

Peter Rasmussen