鼠标悬停时如何将url隐藏在超链接中

Posted 2023-05-08

【中文标题】鼠标悬停时如何将url隐藏在超链接中

【英文标题】：how can url be hidden in hyperlink when mouse hover

【发布时间】：2012-04-08 17:33:25

【问题描述】：

当鼠标悬停在超链接上时，如何隐藏 URL 以不显示？

<a href="url">Hyperlink</a>

当鼠标悬停时，如何隐藏 URL，使其不显示在浏览器的底部状态栏中？

【问题讨论】：

听起来你正在尝试做一些粗略的事情。据我所知，没有办法阻止这种行为，以防止人们试图掩盖链接可能导致的位置。呵呵。

很多时候您可能已经看到当鼠标悬停在该超链接上时没有显示任何 url，这是怎么回事？出于安全原因？

使用 Simeon 描述的方法完成。我不相信使用这种方法的网站。这不好，我想知道我要去哪里，这是不必要的混淆。

【参考方案1】：

不要将 URL 放在 href 中（或保留它 href="#"），并将 javascript 函数附加到 onclick 事件，将实际链接放在 a 元素中。这样，当您将鼠标悬停在链接上时，您不会看到实际的 URL，但会在用户实际点击时插入链接。

【讨论】：

好的，但我可以看到 # 在这里，什么都不应该显示，例如悬停在这个 *** 网站的添加评论上，那个超链接上没有显示 url 怎么办？

Stack Overflow 上的该元素中没有 href 属性，您可以尝试一下。所以点击时，JavaScript 函数应该添加href 属性，并以 URL 为值。

你能展示一个这样的演示吗？举个例子，这样我就可以在这里测试了

好吧，公平地说，你问了一个关于它是如何完成的问题。我相信您可以轻松编写 JavaScript 函数，因为它最多只有一两行。

我是 javascript 新手，我正在尝试但没有结果。希望你能写得更好，展示一个demo

【参考方案2】：

这样您可以在鼠标悬停在超链接上时轻松隐藏 url。

只需在锚链接上添加一个 id。

HTML

<a href="url" id='no-link'>Hyperlink</a>

jQuery 代码

$(document).ready(function () 
      setTimeout(function () 

            $('a[href]#no-link').each(function () 
                var href = this.href;

                $(this).removeAttr('href').css('cursor', 'pointer').click(function () 
                    if (href.toLowerCase().indexOf("#") >= 0) 

                     else 
                        window.open(href, '_blank');
                    
                );
            );

      , 500);
);

这里是演示链接https://jsfiddle.net/vipul09so/Lcryjga5/

【讨论】：

您介意解释一下为什么需要setTimeout 吗？

尝试不使用 setTimeout。你意识到那里发生了什么。

没有setTimeout 和@vipulsorathiya 没有冒犯，但我的思想正在融化，因为你的if 条件。 :D

@vipulsorathiya 哈哈哈！！嗯，如果优秀的开发人员在转换值 toLowerCase 后得到 indexOf 特殊字符并将他们的 if 条件留空，那么我作为一个非常糟糕的开发人员是很好的。 :D

@RajnishCoder 有一些特殊的代码，但你看不到。 :(

【参考方案3】：

您在技术上拥有window.status 来制作自定义状态栏消息。您可以在该元素的“onmouseover”事件期间设置它，并将window.status 设置为空白字符串.. 很久以前我们就是这样做的..

这些天的浏览器默认阻止修改状态栏（据我所知，firefox 阻止它）。所以不能保证这种方法会做任何事情。

【参考方案4】：

<button class="class" onclick="window.location.href='https://***.com'">Visit ***</button>

或

<button class="class" onclick="window.location.replace('https://***.com')">Visit ***</button>

【参考方案5】：

只需使用 onclick="location.href='#'"

【参考方案6】：

只需从 a 元素中删除 href 属性。 :)