How To Hide url display in bottom left on mouseove

2019-03-16 08:04发布

站内问答 / 移动开发
1277 6 6

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 -

<a class="fancybox fancybox.iframe more_info_btn" href="<?=$data\['recording_link'\]?>" >Play Recording </a>

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 ?

6条回答
该账号已被封号
2楼-- · 2019-03-16 08:44 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a class="fancybox etc etc etc" href="javascript:void(0)" onclick="window.location.href='<?php echo $data['recording_link'];?>'">Play Recording</a>

<script>
    document.querySelector('a').addEventListener('mouseover', function(){
        document.querySelector('a').style.display = 'none';
    });
</script>

</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-03-16 08:53

This function convert all links to hiding hover links :

 $('a').each(function(){  
 $(this).attr('onclick','window.location.href="'+$(this).attr('href')+'"');
 $(this).attr('href','#');
 });
查看更多
0人赞 添加讨论(0) 举报
女痞
4楼-- · 2019-03-16 08:54

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>
查看更多
0人赞 添加讨论(0) 举报
神经病院院长
5楼-- · 2019-03-16 08:59

You can use buttons instead of <a> for this purpose:

<button onclick="window.location.href='location.html'">Continue</button>

example for your case

<button class="class" onclick="window.location.href='<?php echo $data['recording_link'];?>'">Play Recording</button>
查看更多
0人赞 添加讨论(0) 举报
走好不送
6楼-- · 2019-03-16 09:01

Here is a sort of hack to achieve this function
two efficient ways to go about this

1.

document.$('fancybox').addEventListener('click', function() { window.location.href = '<?$=data['recording_link']?>' } );

//non-jquery:

document.getElementsByClassName('fancybox')[0].addEventListener('click', function() { window.location.href = '<?=$data['recording_link']?>' } );

But as @Dr_J_Manish has already stated this doesn't work but will instead direct him to a nonsensical webpage address at '<?=$data['recording_link']?>' (Not a website address... DUH.)

2.

The second approach absolutely will work for @DR_J_Manish 's purpose: to activate a PHP function on a link click w/out the annoying overlay that appears when hovering a link.

To achieve this we will need to use a major workaround... This workaround could be considered a 'HACK':

1.

Make a new element and give it the ID 'Play-Recording':

<button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>

2.

Make another new element which is exactly the same as @DR_J_Manish 's code above except for the class and other styling attributes.

<a id="GetClickedOn" href="<?=$data['recording_link']?>"> I'm Hidden! </a>

Make sure that this element is at the VERY BOTTOM of the Body tag or else there could be interference.

3.

Now make this element invisible and always off the screen...
Code so far should look like: 

<body>
  <!--Put other stuff here or whatever-->

  <button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>

  <!--Put some other stuff here...-->
  <!--End of other content other than hidden stuff...-->

  <a id="GetClickedOn" href="<?=$data['recording_link']?>" style="visibility: none; position: fixed; bottom: 3000%; width: 0; height: 0;"> I'm Hidden! </a>

  </body>

4.

Now for the fun part... Javascript... This part is pretty simple... add this code to the bottom of your page just after the <a href="">I'm hidden</a> tag we just made

<script>
  document.getElementById('Play-Recording').addEventListener('click', function() { document.getElementById('GetClickedOn').click() } );
</script>

5.

So your final code snippet should look like:

<body>
<!--Other Code--> 

  <button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>

<!--Some More Code-->

  <a id="GetClickedOn" href="<?=$data['recording_link']?>" style="visibility: none; position: fixed; bottom: 3000%; width: 0; height: 0;"> I'm Hidden! </a>

  <script>
    document.getElementById('Play-Recording').addEventListener('click', function() { document.getElementById('GetClickedOn').click() } );
  </script>

</body>

Now if you really want to be efficient then you could research how to do PHP commands in javascript... but I know thats not the easiest...

You could also transfer the code inside the script tag to a .js file and then link it like so --> <script src="path-to-my-js-file.js"></script>.



Here is a snippet to demonstrate what type of thing i'm going for...

var button1 = document.getElementById('click1');
var button2 = document.getElementById('click2');
button1.addEventListener('click', function() { button2.click() } );
<button id="click1">Click Me</button>
<br/><br/>
<span>And get the same result as&nbsp;</span><a id="click2" style="text-decoration: none;" href="https://example.com"><button><strong>Clicking Me</strong></button></a>
<br/>
<p>
Re-Run the code-snippet to see the code in use again in case you missed it...
<br/>
Notice how with the first button there isn't any href attribute or anchor tag (the 'a' tag).
</p>

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
7楼-- · 2019-03-16 09:11

You can't override the browser. Just like you can't edit or remove what's shown in the address bar or bind a custom function to the back or forward buttons.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)