如何使弹出框在jquery中不闪烁

我有一个简单的场景，其中我有div标记，当鼠标悬停在上面时，它会使用jquery和jquery ui显示一个包含更多信息的覆盖。我遇到的问题是，当鼠标悬停在覆盖层上时，覆盖层会闪烁：

$('#myobject').hover(function() {
  $popover = $('#popover');
  $popover.show();
  $popover.position({
    my: "left top",
    at: "left top",
    of: $(this)
  });
}, function() {
  $('#popover').hide();
});

显然，我必须做一些事情，在popover上移动鼠标不会杀死悬停事件，但我不知道如何做到这一点。您可以在此处看到正在运行的场景：

尝试将子级放在父级中：

---

它会像那样闪烁，因为“hover”事件附加到myobject。当您四处移动鼠标时，鼠标不会悬停在myobject上，因为您在myobject上有popover。因此，您正在myobject和popover之间快速移动，导致闪烁发生

一个更好的解决方案是使用mouseover和mouseout的组合

$('#myobject').mouseenter(function() {
    $popover = $('#popover');
    $popover.show();
    $popover.position({
        my: "left top",
        at: "left top",
        of: $(this)
    });
});

$('#popover').mouseout(function() {
    $('#popover').hide();
});

---

我已更新了您的。请删除myobject上的mouseleave事件，并将其添加到popover元素中：

$('#myobject').bind('mouseenter',function() {
    $popover = $('#popover');
    $popover.show();
    $popover.position({
        my: "left top",
        at: "left top",
        of: $(this)
    });
});

$('#popover').bind('mouseleave', function(){
    $(this).hide();
});

更新的JSFIDLE:

一旦显示popover div，jQuery认为它不再在myobject上悬停，移动鼠标，循环继续导致闪烁

这项工作：

$('#myobject').mouseenter(function() {
    $popover = $('#popover');
    $popover.show();
    $popover.position({
        my: "left top",
        at: "left top",
        of: $(this)
    });
});

$('#popover').mouseout(function() {
    $('#popover').hide();
});

根据您修复角点问题的需要，在某些情况下可能会出现一种笨拙的解决方法，即通过添加以下内容，确保每当鼠标返回页面主体时，popover都已关闭：

$('body').hover(function() {
    $('#popover').hide();
});

---

很好…虽然我的答案有效，但我也喜欢这个+1你有什么理由愿意或不愿意做一件事而不是另一件事吗？谢谢。我喜欢它的简单性，但我相信如果您希望孩子完全与页面对齐，而您的父母有align:relative，那么就会出现问题。不过，当孩子需要相对于父母对齐时，这种方法非常有效。啊，很好。好吧，不管是哪种方式，为了简单起见还是+1。对不起@Keltex，我会尝试其他答案之一。几乎有效。问题是，如果你飞得很快，它会让人看不见popover。其他类似的答案也是一样。@Keltex-Huh…非常有趣。我没注意到……让我看看。如果我能很快过拐角，我就能做到。基本上，我认为在这种情况下，鼠标永远不会在popover中，所以mouseout事件不会发生。@Keltex-是的，我相信你是对的。你能不能在事后不必将$popover移到左上角的情况下定位它？不幸的是，弹出窗口遮挡了对象，这是设计的一部分。我考虑的一个选项是设置setInterval来轮询鼠标是否在弹出窗口之外……几乎可以工作。问题是，如果你飞得很快，它会让人看不见popover。其他simlar答案也是一样。@keltex-好的，为您的“角落”问题添加了一个可能的解决方法。由于jsFiddle框架的设置方式，这将在整个页面上更好地工作：jsFiddle.net/vRH3Q/13几乎可以工作。问题是，如果你飞得很快，它会让人看不见popover。其他simlar答案也是如此。

$('body').hover(function() {
    $('#popover').hide();
});