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

Posted 2023-05-09

【中文标题】当我使用 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 的答案相同的链接