How to Hide Link Information At the Bottom Left/Right of the Browser on Hover

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

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>

How to display a different link in the bottom left corner on anchor hover than the href attribute of the said anchor?

I can't say for sure how Google handles this because their JS is uglified, but if I had to guess, I think it would be something like this:

By looking DOM structure of search results, a element has href with previewing link and another tag ping with actual link. On click in JS it sets ping location (preventing default behavior).

DOM structure of google.com search result

Below is code how this can be achieved.

window.addEventListener('load', () => {  let element = document.getElementsByTagName('a')[0]  element.addEventListener('mousedown', (event) => {    event.target.setAttribute('href', event.target.getAttribute('other'))  })})

<a href="http://google.com/" other="http://bing.com/">Link</a>

How to hide the url of the browser's left-bottom corner when a link is hovered

you need to have an addon called status-4-evar for firefox to achieve this.
status-4-evar

Please follow the url to find more about how to do this.

you can also change the anchor tags and replace it with span tags.

thanks

how can url be hidden in hyperlink when mouse hover

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.

How to hide url on mouse hover of a hyper link

TL;DR; Simply use JavaScript, like:

window.location.href = "https://stackoverflow.com";

Remove the "<a ...>" element's href-attribute.

Then make it trigger a JavaScript function:

<a onclick="myFunction()">my link</a>

Finally, simply use JavaScript to redirect, like:

<script type="text/javascript">
  function myFunction() {
    window.location.href = "https://stackoverflow.com";
  }
</script>

Note that you may need to add CSS to set cursor, I mean, already existing CSS may check href's existence, and not apply once href is removed.

Reusing same function

<a data-url="https://stackoverflow.com"
   onclick="myFunction(this)">my link label</a>

<!-- In case you are using Twig or Blade: -->
<a data-url="{{ 'https://example.com' }}"
   onclick="myFunction(this)">my other link</a>

<script type="text/javascript">
  function myFunction(element) {
    window.location.href = element.getAttribute('data-url');
  }
</script>

Hide url display in bottom left on mouseover?

I understand your concern regarding your business.

The link you have shared is for WebView2.

Microsoft WebView2 is a developer control for embedding web content in applications. It allows developers to leverage the best of what the Microsoft Edge Chromium platform can offer and build seamless experiences for their users that incorporate web-based content.

It cannot help you hide the URLs on hover for the images on your site while visiting it through different browsers.

As informed by the other community member, it is a security feature in the browsers so users could know which site they are going to visit if they click the link. It is not recommended to modify it to hide it for security reasons.

further, you don't know that the customers visit your site using which browser. Every browser works differently and it is not possible to remove/ hide or disable that information from the browser side.

There are some code examples I found that use some JS code to achieve your requirement. You need to modify your site code. If you are not a developer then it could be difficult for you and you may break your site. So it is recommended to take help from your site developers.

Below are the helpful links.

How To Hide url display in bottom left on mouseover?
How to hide link information at the bottom left/right of the browser on hover
how can url be hidden in hyperlink when mouse hover
Is it possible to hide link address on hover?

The best thing would be to remove the unwanted information from the image links.

How to hide the URL when hover over a link?

With CSS only, you can set up a layer on top of the link. Below is an example of using pseudo element :before + some position tricks.

article {  position: relative;  display: block;}article:before {  content: "";  position: absolute;  left: 0; right: 0; top: 0; bottom: 0;  z-index: 1;}

<article>  <a class="thumbnail" href="http://vjs.zencdn.net/v/oceans.mp4">    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />  </a></article>

How to Hide Link Information At the Bottom Left/Right of the Browser on Hover