How To Hide url display in bottom left on mouseover?

Question

I have a page for member's where log in is essential. On this page members get links for lectures conducted. Lectures links get added regularly. And Links to recording are fetched on this page from database and last 30 recording links are available (through Limit $max). code is as follow -

Here, when user move cursor on "Play Recording" he can see recording link in left bottom corner of browser.

How can I hide this Link getting displayed in left bottom corner on mouseover ? Can i Show only Word "Recording" Instead of link displayed ?

Answer 1

1. <a onclick="location.href='www.youtube.com'">click</a> you should this it will not show any URL or message on the bottom corner.

2. <a href="javascript:void(0)" onclick="location.href='https://www.youtube.com/></a> if you use javascript:void(0) then it wil shown javascript void(0) on right bottom corner in place of url.

Answer 2

You just have to do the same as it was suggested with the button, but using the anchor you wanted. This is, use the onclick event instead of setting href attribute. And additionally you could add a noop js operation to href.

See this link: http://asp-arka.blogspot.com.uy/2014/08/hide-url-on-mouse-hover-of-hyper-link.html

<a class="fancybox etc etc etc" href="javascript:void(0)" onclick="window.location.href='<?php echo $data['recording_link'];?>'">Play Recording</a>

Answer 3

Check the below code it will work in all browsers

Hide url toaster in bottom left on mouseover

$(function(){
           $("a").each(function (index, element){
               var href = $(this).attr("href");
               $(this).attr("hiddenhref", href);
               $(this).removeAttr("href");
           });
           $("a").click(function(){
               url = $(this).attr("hiddenhref");
              // window.open(url);
                                         window.location.href = url;
           })
       });

ul > li > a{
  font-size: 18px;
  line-height: 30px;
}

ul > li > a:hover {
  color: #425CD2;
  text-decoration: underline !important;
  cursor: pointer;
}

<ul>
 <li><a href="http://www.google.com">Google</a></li>
 <li><a href="https://codepen.io">Codepen</a></li>
 <li><a href="https://codepen.io/awesomeSri/pen/WBKwpz?editors=1111" >Codepen hide url toaster snippet</a></li>

</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>