1。

Question

我有一个会员页面，其中登录是必不可少的。在此页面上，会员可以获得讲座的链接。讲座链接定期添加。并且在此页面上从数据库中获取记录链接，并且可以使用最后30个记录链接（通过Limit $ max）。代码如下 -

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

此处，当用户将光标移动到“播放录制”时，他可以在浏览器的左下角看到录制链接。

如何隐藏此链接在鼠标悬停时显示在左下角？我可以只显示单词“录制”而不是显示链接吗？

Answer 1

你只需要按照按钮建议的那样做，但是使用你想要的锚。这是，使用onclick事件而不是设置href属性。另外，你可以在href中添加一个noop js操作。

请参阅此链接：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 2

此功能将所有链接转换为隐藏悬停链接：

 $('a').each(function(){  
 $(this).attr('onclick','window.location.href="'+$(this).attr('href')+'"');
 $(this).attr('href','#');
 });

Answer 3

您可以使用按钮代替<a>来实现此目的：

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

您案例的例子

<button class="class" onclick="window.location.href='<?php echo $data['recording_link'];?>'">Play Recording</button>

Answer 4

<!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>

Answer 5

您无法覆盖浏览器。就像您无法编辑或删除地址栏中显示的内容或将自定义功能绑定到后退或前进按钮一样。

Answer 6

这里是实现此功能的一种方法
两种有效的方法来解决

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']?>' } );

但是，正如@Dr_J_Manish已经指出的那样，此操作不起作用，而是将其定向到“ <?=$data['recording_link']?>”（不是网站地址... DUH）上的荒谬网址。

2。

第二种方法绝对适用于@DR_J_Manish的目的：要激活链接上的PHP函数，请单击悬停链接时出现的烦人的叠加层。

要实现此目的，我们将需要使用主要的解决方法...该解决方法可以视为“ HACK”：

1。

制作一个新元素并为其赋予ID“播放记录”：

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

2。

再添加一个新元素，该新元素与上述@DR_J_Manish的代码完全相同，除了class和其他样式属性。

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

请确保此元素位于“身体”标签的底部，否则可能会造成干扰。

3。

现在使该元素不可见并始终在屏幕上...
到目前为止，代码应如下所示：

<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。

现在是有趣的部分... Javascript ...这部分非常简单...在我们刚刚制作的<a href="">I'm hidden</a>标签之后，将此代码添加到页面底部

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

5。

因此，您的最终代码段应如下所示：

<body>


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

  <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>

现在，如果您真的想提高效率，那么可以研究如何在PHP中执行javascript命令...但是我知道那不是最简单的...

您还可以将script标记内的代码传输到.js文件，然后将其链接-> <script src="path-to-my-js-file.js"></script>。

这是一个片段，用来演示我要做什么类型的事情...

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>

Answer 7

检查以下代码，该代码将在所有浏览器中运行

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>

Answer 8

<a onclick="location.href='www.youtube.com'">click</a> 您应该这样做，它不会在底角显示任何URL或消息。
<a href="javascript:void(0)" onclick="location.href='https://www.youtube.com/></a> 如果您使用javascript:void(0)，则它将在网址的右下角显示javascript void(0)。

如何在鼠标悬停时隐藏左下角的网址显示？

8 个答案:

1。

2。

3。

4。

5。