正文 

当前位置： 首页 > 问答 >

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

     2023-05-08     46

关键词：

【中文标题】鼠标悬停时如何将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】： 

&lt;button class="class" onclick="window.location.href='https://***.com'"&gt;Visit ***&lt;/button&gt;

或

&lt;button class="class" onclick="window.location.replace('https://***.com')"&gt;Visit ***&lt;/button&gt;

【讨论】：

【参考方案5】：

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

【讨论】：

【参考方案6】：

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

【讨论】：

悬停时JQuery显示/隐藏

...:12:40【问题描述】：我有三个链接，猫、狗、蛇。当我将鼠标悬停在每个链接上时，与每个链接相关的内容应该会发生变化。因此，如果我将鼠标悬停在cat上，则会出现cat内容，如果我将鼠标悬停在dog上，则cat内容会平滑消失，... 查看详情

在jquery中快速悬停时不隐藏

...0-08-1706:38:56【问题描述】：我总共有九个链接，当有人将鼠标悬停在它们上方时，我希望每个链接显示一张图片。脚本运行良好，但如果有人将鼠标快速悬停在他们身上，图像会徘徊并停留在屏幕上：它们不会隐藏。这里是设置... 查看详情

如何在状态栏中隐藏 url 地址？ [复制]

...：可能重复：JavaScript:Changebrowserwindowstatusmessage当我们将鼠标悬停在某些链接文本上时，目标链接会显示在状态栏中。我们如何在状态栏中隐藏链接地址。例如，在以下链接中：<ahref="jav 查看详情

将鼠标悬停在模式链接上时隐藏浏览器状态栏上的链接

】将鼠标悬停在模式链接上时隐藏浏览器状态栏上的链接【英文标题】：Hidinglinksonbrowser\'sstatusbarwhenyoumouseoveronlinksformodals【发布时间】：2020-12-2614:45:08【问题描述】：我正在尝试禁用雕像栏中的鼠标高亮显示。我已经写了这段JS... 查看详情

当我在 SVG 中将鼠标悬停时，如何显示和隐藏同级元素？

】当我在SVG中将鼠标悬停时，如何显示和隐藏同级元素？【英文标题】：HowcanIshowandhidesiblingelementwhenImouseoverinSVG?【发布时间】：2021-05-1501:12:38【问题描述】：我使用了SVG文件，它是带有两个分割的圆形，当我将鼠标悬停在选定... 查看详情

是否可以在悬停时隐藏链接地址？

...的图表，当它显示链接在浏览器左下角的位置时，当你将鼠标悬停在链接上时，它真的让我很烦恼，就像这样：这个可以去掉吗？只要我可以隐藏/删除它（HTML、CSS、JS等），任何方法都可以。【问题讨论】：你为什么要这样做... 查看详情

悬停时如何使链接具有戴手套的手鼠标[重复]

】悬停时如何使链接具有戴手套的手鼠标[重复]【英文标题】：Howtomakealinkhavetheglovedhandmousewhenhovering[duplicate]【发布时间】：2011-02-1320:20:53【问题描述】：可能重复：Makemousepointerahandwhenhoverover<li>element?我有一个输入表单按钮... 查看详情

将鼠标悬停在 iframe 上时如何显示文本

】将鼠标悬停在iframe上时如何显示文本【英文标题】：Howtodisplaytextwhenhoveroveraniframe【发布时间】：2022-01-2110:53:15【问题描述】：我是新来的，首先要问一个特殊的问题：当用鼠标悬停在iframe上时，应该会出现一个带有文本的透... 查看详情

鼠标悬停播放声音

】鼠标悬停播放声音【英文标题】：Playsoundonmouseover【发布时间】：2014-04-0712:11:17【问题描述】：我将在鼠标悬停时在链接上添加声音，然后在鼠标移出时停止，当鼠标再次悬停时，声音将开始播放。我即将把它放在链接上，但... 查看详情

在悬停时将文本链接转换为图像

...个文本链接的网站。我正在努力做到这一点，因此当我将鼠标悬停在文本链接上时，会显示一个特定的图像。我已经能够将鼠标悬停在文本上并更改其颜色。但我不知道如何让每个链接悬停在不同的图像上。<!DOCTYPEhtml><hea... 查看详情

删除在状态栏中显示超链接的超链接/鼠标悬停按钮

】删除在状态栏中显示超链接的超链接/鼠标悬停按钮【英文标题】：Removeshowinghyperlinkinstatusbaronhyperlink/buttononmouseover【发布时间】：2016-09-0103:02:43【问题描述】：在我的应用程序导航器中，状态栏默认显示在每个屏幕的底部，并... 查看详情

HTML/CSS - 将鼠标悬停在照片上时显示链接

】HTML/CSS-将鼠标悬停在照片上时显示链接【英文标题】：HTML/CSS-Displaythelinkwhilehoveringoveraphoto【发布时间】：2020-12-0416:15:49【问题描述】：我希望在将鼠标悬停在图像上时显示我的链接。我编写代码的方式仅在我将鼠标悬停在链... 查看详情

如何在悬停时获得实际的 DOM CSS 宽度？ [复制]

...【发布时间】：2013-02-2418:41:41【问题描述】：当我必须将鼠标悬停以使事件发生时，如何展开以查看计算出的宽度？每当我将鼠标悬停在菜单中的链接上时，宽度就会从270像素更改为850像素，并使整个菜单失控。但我无法确定是... 查看详情

悬停链接并在 SVG 中更改颜色 [重复]

...5-02-0713:26:47【问题描述】：我创建了一个SVG地图，当我将鼠标悬停在链接上时，我想更改地图目标区域的颜色。当我将鼠标悬停在地图上的某个区域时，链接会从jQ获取下划线类，并且CSS悬停效果会更改地图上的填充颜色。但是... 查看详情

将鼠标悬停在图像上时如何更改 SVG 的颜色？

】将鼠标悬停在图像上时如何更改SVG的颜色？【英文标题】：HowtochangethecoloroftheSVGwhenhoveringovertheimage?【发布时间】：2021-12-1807:48:27【问题描述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube... 查看详情

将鼠标悬停在 url RichTextBox 上时更改光标

】将鼠标悬停在urlRichTextBox上时更改光标【英文标题】：ChangeCursorwhenhoveringoverurlRichTextBox【发布时间】：2021-11-2718:43:37【问题描述】：当前，当鼠标悬停在RichTextBox(WinForms)中的url/链接上时，光标会变为质量非常低的光标，没有抗... 查看详情

将鼠标悬停在图像链接上时显示文本

】将鼠标悬停在图像链接上时显示文本【英文标题】：ShowingTextWhenHoveringOveranImageLink【发布时间】：2013-08-2720:04:16【问题描述】：我已经看过这里(Howtoshowtextonimagewhenhovering?)以找到解决此问题的方法，但它不能100%起作用...因为该... 查看详情

在鼠标悬停时将文本悬停在帖子图像上

】在鼠标悬停时将文本悬停在帖子图像上【英文标题】：Hovertextoverpostimageonmouseover【发布时间】：2015-08-0619:36:07【问题描述】：我正在使用Genesis框架在wordpress中重新设计博客。这可能是有史以来最简单的事情，但我找不到一个... 查看详情