悬停在元素上时如何在浏览器底部预览URL

时间:2018-01-15 22:04:42

标签: javascript jquery html browser

对于普通超链接,您可以将鼠标悬停在链接上,您将在浏览器窗口的左下角看到该网址的预览。 Example with hyperlink

出于我的目的,我想制作它,这样你就可以将鼠标悬停在任意元素(可能是一个按钮)上,然后让它在窗口底部预览URL。这是可能的,如果是的话,怎么样?我还没有找到任何解决方案,但可能有一些我忽略的东西。

<a href="https://google.com">This has a preview effect</a><br><br><br>
<button onclick="window.location='https://google.com';">This needs a preview effect</a>

2 个答案:

答案 0 :(得分:2)

无法手动将此网址预览添加到任何元素。这将是一个很大的安全问题,因为URL预览可用于在访问页面之前确定URL是否合法或不可信。

您可以使用title属性在悬停时显示标签。

答案 1 :(得分:1)

这是一个浏览器实现。

锚标签是您的最佳选择

您可以在按钮标记

周围包装锚标记
<a href="https://google.com">This has a preview effect</a><br>
<a href="https://othergoogle.com"><button>This needs a preview effect</button></a>

这不是你最好的选择。

您最好的选择是根据需要设置锚标记的样式。

使用id和类来定位CSS中的元素并根据需要设置样式。

对于最终用户来说,在查看看起来像按钮或由锚标记包裹的按钮的样式化锚标签时,确实没有区别。

希望这会对你有所帮助。