jQuery 悬停和取消悬停

Question

我有以下代码:

    $('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(); });
        });

因此，当您将鼠标悬停在 uiPopup 上时，uiTip 就会出现，然后当您取消悬停时，它会再次消失，但是如果您将鼠标悬停在提示上，它会阻止提示被删除并将其保留在屏幕上，直到鼠标离开，然后将其移除。

但是不起作用:/有什么想法吗？谢谢

.remove() 是故意在我的真实脚本中使用的(这是显示我的示例的片段)我正在使用 AJAX 加载 .uiHelp 并且它们具有独特的 id (同样没有在上面的示例中显示，因为超出了问题的范围)这一切都很好，只是当用户将鼠标悬停在提示本身时停止它!

编辑:对于那些想要查看完整脚本以及为什么我必须使用悬停的人:

$('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(); });
        });

Answer 1

嗯，您在一个代码片段中提到了 uiTip，而在另一个代码片段中提到了 uiHelp。 uiTip 是否位于 uiHelp div 内？如果是这样，问题在于您的鼠标离开链接以到达工具提示 div 的顶部，因此在您的鼠标被视为“越过”该 div 之前，该链接已被删除。

这是一个可能的解决方案:

$('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();
});

这让用户在工具提示消失之前有十分之一秒的时间来访问工具提示上的链接。您可以在 setTimeout 调用中调整该时间。

我将由您来整理 uiTip/uiHelp - 您只需要在某个地方存储对计时器的引用。