您在Wordpress中悬停时隐藏或隐藏地址链接

Question

When you hover a link in HTML, in the side left-bottom of the browser appears the link address that you are hovering.

If I have a link with UTM parameters, I don't want that address appears there, I would like that it shows me another "name" or "address".

How could I hide or cloak the address link in Wordpress ?

PD: No plugins

Any idea.

Thanks

Answer 1

There's a way to "cloak" that for sure.

The browser takes the information to display from the href attribute... And there is nothing to do to avoid the behavior of displaying it.

So the trick is to NOT use the href attribute at all. The URL has to be somewhere else then... And a data attribute is perfect for this.

The markup for the link would be:

<a class="cloaked" data-href="https://www.example.com/book-launch?utm_source=facebook&utm_medium=social&utm_campaign=book-launch-2014-may">Visit example.com</a>

Then you just have to style the anchor the same way as it would normally look.
Example CSS:

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

And finally, a click handler will open a new tab to mimic the normal anchor behavior.

To open a new tab:

$(document).ready(function(){
  $(".cloaked").on("click",function(){
    window.open($(this).data("href"));
  });
});

To open the target page in the current tab:

$(document).ready(function(){
  $(".cloaked").on("click",function(){
    location.assign($(this).data("href"));
  });
});

Notice that the UTM params are easilly visible to anyone who knows how to "inspect" a document using the dev tools... And those will be visible in the adress bar of the target page opened.