CODEWITHSUNDEEP
htmlhyperlink
Chun
Chun

Reputation: 2270

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

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:

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

Upvotes: 15

Views: 40788

Answers (8)

Bijay
Bijay

Reputation: 1

If you need this in Angular then you can try this.

In your TS file:

constructor(private renderer: Renderer){}

onMouseEnter(event: MouseEvent): void
{
   this.renderer.removeAttribute(event.target as Element, 'href');
}

In your HTML file:

<a [href]="url" (mouseenter)="onMouseEnter($event)></a>

Upvotes: 0

User5486
User5486

Reputation: 9

Try:

<a onclick="window.location = '/users'">Users</a>

Upvotes: 0

SkyzoX Codes
SkyzoX Codes

Reputation: 11

for hide the information use this code:

<button onclick="window.location.replace("https://yourdomain.com/path")"></button>

location.window.replace for replace the current link to another link

Upvotes: 0

user16162494
user16162494

Reputation:

The easiest answer is just use-

<p onclick="window.open('Your Link')">Blah Blah Blah</p>

Easy!

You can also open more links at a time-

HTML:

<p onclick="OpenTwoLinks()">Google And StackOverFlow</p>

Javascript:

function OpenTwoLinks() {
   
  window.open('https://google.com');
   
  window.open('https://stackoverflow.com');
}

Upvotes: 0

Rinkal Agrawal
Rinkal Agrawal

Reputation: 51

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

Upvotes: 3

Chun
Chun

Reputation: 2270

After digging even more deeper, I've found a more simpler and easier solution for it on this w3schools article and also with the help of this question in SO I could manage it to open on a new window:

<button id="anchorID" >Go to page</button>

$("#anchorID").click(function() {
    window.open(
    'http://www.w3schools.com',
    '_blank' // <- This makes it open in a new window.
    );
});

Jsfiddle live example: http://jsfiddle.net/6sLzghhm/

Upvotes: 3

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

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>

Upvotes: 10

nbar
nbar

Reputation: 6158

The stackoverflows Anybody can ask a question-Link is not a hyperlink. Its a HTML Element (in this case a li-Element):

<li id="q">Anybody can ask a question
</li>

with the CSS cursor: pointer; and a click-Eventlistener.

Upvotes: 1

Related Questions