Question

我在html中有一个输入字段，在字段旁边有一个帮助图标（？），当我将鼠标悬停在图标上时，我希望显示一条简单的短信，并且文字信息应该在徘徊时消失。用jquery做任何方法吗？

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

Answer 1

动态创建DOM元素，然后使用目标元素的偏移量将其定位。您可以在mousein事件上附加元素的创建，并在目标元素的mouseout事件上附加破坏。

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

将此函数添加到您的on ready函数，或者在声明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();
});

Answer 2

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

这是一个很好的例子。

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

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

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

也检查这个例子，

http://jsfiddle.net/DLQsX/

Answer 3

请参阅jQuery hover event。

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

Answer 4

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

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

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

4 个答案: