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并且他们有unqiue 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 - 你只需要在某个地方存储对计时器的引用.