How to hide link information in bottom left / right browser on hover
How do I create a link that does not display its information at the bottom left or right (it depends on the position of the link) when hovering over the hyperlink? Let's say we have a link:
<a href="/users">Users</a>
and we want to hide its information, or rather its information about the hyperlink that is displayed in the lower left corner of the browser, for example, the example in the image below:
Now I know this is possible because the Stack Exchange networking sites themselves use this for "Welcome Banner"
being displayed on the first page the first time you visit each site.
If you hover over any of the links:
-
Can anyone ask a question
-
Can anyone answer
-
Best answers voted and climbed to the top
You will see that no information is displayed hyperlink
. Check out the image below to see"Welcome Banner"
source to share
This cannot be done with pure html and css. You will need to use javascript for this. Show anchor tag link is how most browsers work. The user also expects to be able to see where he will be redirected.
But it can be done: you can avoid using an anchored tag. Then add another href-like "data-href" attribute. Then bind a click event on the tag that redirects based on that attribute.
I would not, however, do this - as I am not sure if the search engine spiders will see the link.
Here's how to do it, but note that fragments cannot be redirected outside of 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>
source to share
After digging deeper, I found a simpler and easier solution for this w3schools article , and also with this question on SO I could open it in 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/
source to share