当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11781665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show a simple textbox when I hover over an icon using jquery
提问by Haran Murthy
I have an input field in a html and a help icon (?) next to the field, When I hover over the icon I want a simple text message to be displayed and the text message should disappear on hovering away. Any way to do this using jquery?
我在 html 中有一个输入字段，该字段旁边有一个帮助图标 (?)，当我将鼠标悬停在该图标上时，我希望显示一条简单的文本消息，并且该文本消息应该在悬停时消失。有什么办法可以使用 jquery 做到这一点？
Icon will be a simple image say a small question mark. The text will be "Enter your name in the box"
图标将是一个简单的图像说一个小问号。文本将是“在框中输入您的姓名”
回答by Mindwin
Create a DOM element on the fly, then position it fixed using the offset of the target element. You can attach the creation of the element on the mousein event, and the destruction on the mouseout event of the target element.
动态创建一个 DOM 元素，然后使用目标元素的偏移量将其固定。您可以在 mousein 事件上附加元素的创建，并在目标元素的 mouseout 事件上附加销毁。
Assuming your target page element has an id myId:
假设您的目标页面元素有一个 id myId：
Add this to your on ready function, or on a script tag after the myId element has been declared:
将此添加到您的就绪函数中，或在声明 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();
});
回答by MJQ
You can use "tooltip" to travel the text with the mouse while it is on the icon,
当文本位于图标上时，您可以使用“工具提示”用鼠标移动文本，
Here is a good example.
这是一个很好的例子。
http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/
http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/
This is also a good example, you can implement mouse out in a similar way!
这也是一个很好的例子，你可以用类似的方式实现鼠标移开！
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseover/
Check this example too,
也检查这个例子，
回答by jjclarkson
See the jQuery hover event.
请参阅 jQuery悬停事件。
$("#help_icon").hover(function(){
$("#msg_div").hide();
$("#msg_div").show();
});
回答by joevallender
$("#help_icon").hover(
function () {
$("#msg_div").show();
},
function () {
$("#msg_div").hide();
}
);
from the same link as jjclarkson's answer
来自与 jjclarkson 的回答相同的链接
