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 - 你只需要在某个地方存储对计时器的引用。

Answer 2

这可能会对你有所帮助

$('a.uiPopup').hover(function () {          
    $('.uiHelp').show();
},function (e) {
    if(!$(e.target).parents('div.uiTip').length)
       $('.uiHelp').remove();
});
$('div.uiTip').live("mouseleave", function () {
    $(this).remove();
});

Answer 3

你应该使用hide（）而不是.remove（），因为你想要隐藏它而不是从DOM中删除标记。

jQuery悬停和取消悬停

3 个答案: