jQuery 悬停和取消悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7662653/
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
jQuery hover and unhover
提问by Cameron
I have the following code:
我有以下代码：
$('a.uiPopup').hover(function () {
$('.uiTip').show();
},
function () {
$('.uiTip').remove();
});
$('div.uiTip').live("mouseover", function () {
$(this).stop(true, true).show();
});
$('div.uiTip').live("mouseleave", function () {
$(this).remove(); });
});
So when you hover uiPopupthen uiTipappears and then when you unhover it dissapears again BUT if you were to hover over the tip it would stop the tip from being removed and keep it on screen until your mouseleaves and then remove it.
因此，当您悬停uiPopup然后uiTip出现然后当您取消悬停时它再次消失但是如果您将鼠标悬停在提示上，它将阻止提示被删除并将其保留在屏幕上，直到您的鼠标离开然后将其删除。
Doesn't work though :/ Any ideas? Thank you
虽然不起作用：/有什么想法吗？谢谢
The .remove()is intentionally as in my real script (this being a snippet to show my example) I am using AJAX to load in the .uiHelp and they have unqiue ids (again not shown in the above example as beyond the scope of question) Which all works fine just not the bit about stopping it when the user hovers the tip itself!
这.remove()是故意在我的真实脚本中（这是一个显示我的示例的片段）我正在使用 AJAX 加载 .uiHelp 并且它们具有独特的 id（再次未在上面的示例中显示，因为超出了问题的范围）其中所有工作正常，只是当用户悬停提示本身时停止它！
EDIT: For those that want to see the full script and why I have to use the hover:
编辑：对于那些想要查看完整脚本以及为什么我必须使用悬停的人：
$('a.uiPopup').hover(function () {
$tip = '<div class="uiTip uiOverlayArrowLeft loading"><div class="uiOverlayContent"><!--content here --></div><i class="uiOverlayArrow"></i></div>';
$newtip = $($tip).attr('id', 'organisationId-' + $(this).attr('id'));
$($newtip).find('.uiOverlayContent').load(AppURL + 'Organisations/Manage/Tip', function () { $($newtip).removeClass('loading') });
$('body').append($newtip);
$location = $(this).offset(); $top = $location.top; $left = $location.left; $right = $location.right; $bottom = $location.bottom;
$left = $left + $(this).width();
$left = $left + 8;
$top = $top - 10;
$($newtip).css({
'top': $top + 'px',
'left': $left + 'px'
});
},
function () {
$id = "div#organisationId-" + $(this).attr('id');
$($id).remove();
});
$('div.uiTip').live("mouseover", function () {
$(this).stop(true, true).show();
});
$('div.uiTip').live("mouseleave", function () {
$(this).remove(); });
});
回答by Elliot Nelson
Well, you mention uiTipin one snippet and uiHelpin another. Is the uiTipsomewhere inside the uiHelpdiv? If so, the problem is that your mouse leaves the link to get on top of the tooltip div, and so it is removed before your mouse is ever considered "over" the div.
好了，你提uiTip在一个片段，并uiHelp在另一个。uiTip是否在uiHelpdiv内的某个地方？如果是这样，问题是您的鼠标离开链接以到达工具提示 div 的顶部，因此在您的鼠标被视为“超过”该 div 之前，它已被删除。
Here's a possible solution:
这是一个可能的解决方案：
$('a.uiPopup').hover(function () {
$('.uiHelp').show();
}, function () {
$('.uiHelp').data('timer', setTimeout(function () {
$('.uiHelp').remove();
}, 100));
});
$('div.uiHelp').live('mouseover', function () {
if ($(this).data('timer')) {
clearTimeout($(this).data('timer'));
}
});
$('div.uiHelp').live('mouseleave', function () {
$(this).remove();
});
This gives the user a tenth of a second to get from the link over the tooltip, before it disappears. You can adjust that time in the setTimeoutcall.
在工具提示消失之前，这给了用户十分之一秒的时间来从工具提示上的链接获得。您可以在setTimeout调用中调整该时间。
I'll leave it up to you to sort out uiTip/uiHelp - you just need somewhere to store the reference to the timer.
我会让你来整理 uiTip/uiHelp - 你只需要某个地方来存储对计时器的引用。
回答by Sedat Ba?ar
May be this will help u
可能这会帮助你
$('a.uiPopup').hover(function () {
$('.uiHelp').show();
},function (e) {
if(!$(e.target).parents('div.uiTip').length)
$('.uiHelp').remove();
});
$('div.uiTip').live("mouseleave", function () {
$(this).remove();
});
回答by Stryder
you should used hide() instead of .remove(), since you want to hide it and not remove the mark up from the DOM.
您应该使用 hide() 而不是 .remove()，因为您想隐藏它而不是从 DOM 中删除标记。
