正文

当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框

 2023-05-09  22

关键词：

【中文标题】当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框【英文标题】：How to show a simple textbox when I hover over an icon using jquery 【发布时间】：2012-07-31 16:08:19 【问题描述】：

我在 html 中有一个输入字段，该字段旁边有一个帮助图标 (?)，当我将鼠标悬停在图标上时，我希望显示一条简单的文本消息，并且文本消息应该在悬停时消失。有什么方法可以使用 jquery 做到这一点？

图标将是一个简单的图像，说一个小问号。文本将是“在框中输入您的姓名”

【问题讨论】：

在 img 上使用 title 属性或 onehackoranother.com/projects/jquery/tipsy 使其更漂亮 【参考方案1】：

动态创建一个 DOM 元素，然后使用目标元素的偏移量将其固定。您可以在 mousein 事件上附加元素的创建，在目标元素的 mouseout 事件上附加元素的销毁。

假设您的目标页面元素有一个 id myId：

将此添加到您的就绪函数中，或在声明 myId 元素后的脚本标记中：

$('#myId').mouseenter(function()
    $('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
    $('#hoveringTooltip').html("MY TOOLTIP TEXT GOES HERE");
    $('#hoveringTooltip').css(
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    );
);
$('#myId').mouseleave(function()
    $('#hoveringTooltip').remove();
);

【讨论】：

【参考方案2】：

您可以使用“工具提示”在图标上用鼠标移动文本，

这是一个很好的例子。

http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

这也是一个很好的例子，你可以用类似的方式实现鼠标移出！

http://api.jquery.com/mouseover/

也检查这个例子，

http://jsfiddle.net/DLQsX/

【讨论】：

对于工具提示，我也看到浏览器工具提示，这很烦人，当我将鼠标悬停在上面时如何删除它例子中明确提到了。在 $(this).data('tipText', title).removeAttr('title'); 行的 javascript 中它会删除标题，以防止窗口显示自己的工具提示或说出元素的标题。再次检查！它所做的是创建一个您希望在鼠标悬停时显示的自定义标题并删除标题，以便该窗口不应显示元素的标题，并且将显示您的消息。然后鼠标悬停后，它会恢复标题。当我在 Firefox 上打开它时，我看不到它，但它出现在 IE 上检查这个！我在 JSFIDDLE 上的 firefox 中尝试过，jsfiddle.net/tTFYC/7【参考方案3】：

请参阅 jQuery hover event。

$("#help_icon").hover(function()
    $("#msg_div").hide();
    $("#msg_div").show();
);

【讨论】：

【参考方案4】：

$("#help_icon").hover(
  function () 
    $("#msg_div").show();
  , 
  function () 
    $("#msg_div").hide();
  
);

来自与 jjclarkson 的答案相同的链接

【讨论】：

当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像

】当用户使用JQuery将鼠标悬停在链接上时如何显示图像【英文标题】：HowdoIdisplayanimagewhenauserhoversoveralinkusingJQuery【发布时间】：2011-05-2019:38:28【问题描述】：我有一份产品清单。<ul><li><ahref="chair.php">CHAIR</a></... 查看详情

当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

】当我将鼠标悬停在另一个div上时，如何使文本出现在一个div中？【英文标题】：HowdoImaketextappearinadivwhenIhoveroveranother?【发布时间】：2021-02-0313:38:15【问题描述】：我已经为我的网站创建了一个主页，其中包含所有方面的概述。... 查看详情

仅当我将鼠标悬停在其上时如何使图像出现

】仅当我将鼠标悬停在其上时如何使图像出现【英文标题】：HowtomakeimageappearonlywhenIhoveronit【发布时间】：2020-02-0810:31:23【问题描述】：我希望我的图像仅在我将鼠标悬停时出现，我尝试将它放在样式部分但它不起作用。这段代... 查看详情

将鼠标悬停在菜单项上时如何下划线？

...现在正在使用WordPress构建以下网站：https://shaveiceberlin.de当我将鼠标悬停在菜单项上时，如何获得下划线效果，例如在此网站上：https://snocks.com？我当前的css代码：#site-header.ce 查看详情

当鼠标悬停在没有css的标题上时，如何使缩略图消失？

...itlewithoutcss?【发布时间】：2013-09-2510:07:08【问题描述】：当我将鼠标悬停在图片的div上时，我有一个简单的jQuery代码，通过隐藏一张图片并显示另一张图片来更改帖子的缩略图。当我将鼠标悬停在.thumbs类中标记的查看详情

将鼠标悬停在列表上时如何更改锚点颜色

...间】：2011-05-2011:43:39【问题描述】：我有以下HTML和CSS。当我将鼠标悬停在列表上时，我想更改背景颜色和字体颜色。但是，当我将鼠标悬停在列表的填充、边框或列表内的边框附近时，我的样式不会改变。http://jsfiddle.net/Hbf9D/1/... 查看详情

将鼠标悬停在按钮上时如何更改 div 的文本？

...06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在编号框上时，div元素内的文本会根据悬停在哪个框上而动态变化。示例：如果用户将鼠标悬停在框1上，则div元素内的文本会... 查看详情

当我将鼠标悬停在链接上时希望切换图像

】当我将鼠标悬停在链接上时希望切换图像【英文标题】：LookingtoswitchimagewhenIhoveroveralink【发布时间】：2021-03-0409:20:46【问题描述】：我一直在努力解决这个问题，我一直在寻找其他类似的问题，但还没有找到我的问题的答案。... 查看详情

将鼠标悬停在 X 上时，如何仅在单个列表中显示 X？

...whenIhoveronit?【发布时间】：2021-11-2315:51:28【问题描述】：当我将鼠标悬停在单个列表中时，我遇到了问题。当我悬停它时，我只想在一个列表上显示X。但是当我将鼠标悬停在一个时，它会一直显示。importReactfrom"react";importuseStatef... 查看详情

CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接

...题描述】：我的导航栏中有这样的图标(http://d.pr/i/NP2T)。当我将鼠标悬停在一个图标上时，我希望该图标消失并显示该列表项的链接文本(http://d.pr/i/Vd7 查看详情

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

...述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube徽标为红色。目前它不工作。我必须将鼠标悬停在徽标上才能改变颜色，我希望它在我将鼠标悬停在图像上时立即改变。这是一个示例（将... 查看详情

将鼠标悬停在 li 上时如何更改所有字体颜色

...间】：2014-01-0708:00:12【问题描述】：我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有文本都变成白色，背景变成橙色。我的问题是当您将鼠标悬停在li元素上时，“discProd”类中的文本不... 查看详情

当我将鼠标悬停在 div 上时，动画应该开始

】当我将鼠标悬停在div上时，动画应该开始【英文标题】：AnimationshouldstartwhenIhoveroverthediv【发布时间】：2022-01-0722:59:01【问题描述】：我想实现以下内容：动画应该只在我将鼠标悬停在div上时开始。将鼠标悬停在div上后，结束... 查看详情

悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

...ementwithjQuery【发布时间】：2012-03-1823:11:11【问题描述】：当我将鼠标悬停在元素上时，我必须创建带边框的效果，反之亦然。我设法做到了，但问题是每次我将鼠标悬停在其中一个元素上时，我都会取消悬停在我悬停的元素上的... 查看详情

当我使用 CSS 将鼠标悬停在按钮上时，我试图让按钮中的文本改变颜色

】当我使用CSS将鼠标悬停在按钮上时，我试图让按钮中的文本改变颜色【英文标题】：IamtryingtomakethetextinabuttonchangecolorwhenIhoveroverinwiththemouseusingCSS【发布时间】：2020-03-1106:20:40【问题描述】：我有一个wordpress网站，我在标题菜单... 查看详情

使用css将鼠标悬停在按钮上时如何更改站点背景图像？

】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情

jQuery - 当鼠标悬停在元素上时，如何继续动画？

】jQuery-当鼠标悬停在元素上时，如何继续动画？【英文标题】：jQuery-HowcanIcontinueananimationwhilethemousehoversoveranelement?【发布时间】：2011-01-2020:19:07【问题描述】：我需要一种方法来执行某种“whileonmouseover”功能，以便在鼠标悬停... 查看详情

在 HTML 中，如何在将鼠标悬停在文本上时显示图像？

...t?【发布时间】：2015-03-0418:50:10【问题描述】：在HTML中，当我将鼠标悬停在特定文本部分上时，如何使图像出现（或变得可见）？我正在编写一个HTML应用程序，以下是我的代码：.plank1position:static;left:80p 查看详情