如何在鼠标悬停时隐藏左下角的网址显示？
Posted
技术标签:
【中文标题】如何在鼠标悬停时隐藏左下角的网址显示？【英文标题】：How To Hide url display in bottom left on mouseover? 【发布时间】：2014-04-15 15:13:00 【问题描述】：我有一个会员页面，必须登录。在此页面上，成员可以获得所进行讲座的链接。讲座链接会定期添加。并且从数据库中获取此页面上的记录链接，并且最近 30 个记录链接可用（通过限制 $max）。 代码如下-
在这里，当用户将光标移动到“播放录音”上时，他可以在浏览器的左下角看到录音链接。
如何隐藏此链接在鼠标悬停时显示在左下角？我可以只显示单词“录音”而不是显示链接吗？
【问题讨论】：
我在标签中添加了 php，因为在 href="" 中使用了 php 代码，当我尝试使用空 href 的 javascript onclick 时，我很困惑如何在 onclick 函数中使用这个 php php 输出你的 html 它无法控制 onclick/hover 事件 欢迎查看我的回答，希望它能解决您的问题。 是的，我现在正在根据您的建议工作。执行后会通知你 我试过了......它工作得很好，没有在底部显示 url。但是用于 a 的类用于在 fancybox 中打开页面，它在按钮中丢失了 【参考方案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>
【讨论】：
【参考方案2】：为此，您可以使用按钮而不是 <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>
【讨论】：
我试过了...它工作得很好，并且没有在底部显示 url。但是用于 a 的类用于在 fancybox 中打开页面，它在按钮中丢失了 你能帮帮我吗？你提供的代码工作完美，没有在底部显示 url。但是用于 a 的类用于在 fancybox 中打开页面，该功能在按钮中丢失。链接在父窗口中打开，可以在地址栏中看到链接（我想保持隐藏）。所以我的目标没有实现...... 那么你可能需要修复你的 JavaScript 和 jquery 任何你用过的东西。 给按钮一个id并使用javascript处理onclick事件并执行fancybox【参考方案3】：此功能将所有链接转换为隐藏悬停链接：
$('a').each(function()
$(this).attr('onclick','window.location.href="'+$(this).attr('href')+'"');
$(this).attr('href','#');
);
【讨论】：
放在哪里？【参考方案4】：检查下面的代码，它适用于所有浏览器
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>【讨论】：
【参考方案5】：<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)来代替url。
【讨论】：
【参考方案6】：您不能覆盖浏览器。就像您无法编辑或删除地址栏中显示的内容或将自定义功能绑定到后退或前进按钮一样。
【讨论】：
我不想隐藏地址 abr 中显示的链接。我想隐藏鼠标悬停时左下角显示的链接 这是一个类比。浏览器旨在尊重客户的隐私和偏好，高于网站的偏好。此外，如果有人真的想查看链接，他们只需打开 F12 Devtools。 （您可能还想查看***.com/questions/8587809/…）【参考方案7】：这是实现此功能的一种 hack 解决这个问题的两种有效方法
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 'Play-Recording'：
<button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>
2.
创建另一个与上面@DR_J_Manish 的代码完全相同的新元素，除了类和其他样式属性。
<a id="GetClickedOn" href="<?=$data['recording_link']?>"> I'm Hidden! </a>
确保该元素位于 Body 标签的VERY BOTTOM，否则可能会产生干扰。
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.
所以你的最终代码 sn-p 应该是这样的：
<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>
现在，如果您真的想提高效率，那么您可以研究如何在javascript 中执行PHP 命令...但我知道这不是最简单的...
您还可以将script 标记内的代码传输到 .js 文件，然后像这样链接它 --> <script src="path-to-my-js-file.js"></script>。
这是一个 sn-p 来演示我要做什么类型的事情......
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 </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>【讨论】：
嘿，我回答了这个问题，显然这需要一段时间，所以如果我能对这个好的代码获得一些认可，那就太好了。 （点击接受答案框）我的意思是我已经知道一个确切的事实，如果你的按钮以前工作过，但在角落里有东西，那么当你这样做时，它肯定会工作。【参考方案8】：<!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>
【讨论】：
请在您的答案中添加一些解释，以便其他人可以从中学习【参考方案9】：你可以用这个解决你的问题
const hideBottomUrl = ()=>
let anchor = document.getElementById('anchor');
anchor.setAttribute("href","https://***.com/");
anchor.style.color = "black"; anchor.style.textDecoration = "none";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a style="cursor: pointer;" onclick="hideBottomUrl()" id="anchor">Go your page</a>
<a href="https://***.com/">it will hover</a>
</body>
</html>【讨论】：
以上是关于如何在鼠标悬停时隐藏左下角的网址显示？的主要内容，如果未能解决你的问题，请参考以下文章