How to hide url on mouse hover of a hyper link

January 26, 2022

I’m my backend part of the app which is built in PHP Symfony I have HTML twig files, I want to change behavior for some href link, I want to hide URL in the bottom left corner after I hover them, I tried this solution that needs to change URL text to Contact, but it won’t work

                    <a class="activo" href="link" onmouseover="window.status='Contact'" onmouseout="window.status=''">Click</a>

any help?

>Solution :

TL;DR; Simply use JavaScript, like:

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

Remove the "<a ...>" elements 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>

Reusing same function

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

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

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