jQuery 如果鼠标悬停在元素上一段时间，则显示弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4944550/
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
Show popup if the mouse is hovered over an element for a period of time
提问by MacMac
I'm wondering how to show a popup/tipbox when a mouse has been hovered over an element for a period of time, e.g. pseudo code:
我想知道当鼠标悬停在元素上一段时间时如何显示弹出窗口/提示框，例如伪代码：
if mouseover
if hovered for more than 2 seconds
--> show popup/tipbox
else
---> cancel mouseover
else if mouseout
--> reset timer/cancel mouseover
I've done this so far, but it doesn't work effectively, if I hover and move the mouse quickly, it will still show the popup/tipbox.
到目前为止我已经这样做了，但它不能有效地工作，如果我快速悬停并移动鼠标，它仍然会显示弹出窗口/提示框。
$('a[rel=tip]').live('mouseover mouseout', function(e)
{
if(e.type == 'mouseover')
{
var mouseTime = setTimeout(function()
{
$('.tipbox').slideDown('fast');
}, 1000);
}
else if(e.type == 'mouseout')
{
if(mouseTime)
{
cancelTimeout(mouseTime);
mouseTime = null;
$('.tipbox').slideUp('fast');
}
}
});
EDIT:Bounty added.
编辑：增加了赏金。
回答by nico
This seems to work for me:
这似乎对我有用：
HTML
HTML
<span id="someelem">Hover me for 2 seconds!</span>
JS
JS
var tooltipTimeout;
$("#someelem").hover(function()
{tooltipTimeout = setTimeout(showTooltip, 2000);},
hideTooltip);
function showTooltip()
{
var tooltip = $("<div id='tooltip' class='tooltip'>I'm the tooltip!</div>");
tooltip.appendTo($("#someelem"));
}
function hideTooltip()
{
clearTimeout(tooltipTimeout);
$("#tooltip").fadeOut().remove();
}
CSS
CSS
#someelem
{
cursor: pointer;
}
.tooltip
{
display: block;
position: absolute;
background-color: rgb(130, 150, 200);
padding: 5px;
}
回答by Bora Demircan
Try this:
尝试这个：
function show_tipbox (thelink,tipbox) {
var timer;
timer = setTimeout(function(){
$(tipbox).stop(true, true).fadeIn('normal');
}, 300);
$(thelink).mouseout(function(){ clearTimeout(timer); });
}
function hide_tipbox (tipbox) {
$(tipbox).stop(true, true).fadeOut('normal');
}
And the html code should be:
并且 html 代码应该是：
<a href="#" id="thelink" onmouseover="show_tipbox('#thelink','#tipbox');">The link</a>
<div id="tipbox" onmouseout="hide_tipbox('#tipbox');">Tipbox Content</div>
回答by belugabob
You could try This plugin- it's written by one of the authors of a very good jQuery book, so ought to be good. The demos look promising.
你可以试试这个插件——它是由一本非常好的 jQuery 书的作者之一编写的，所以应该很好。演示看起来很有希望。
