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（再次在上面的示例中未显示，因为超出了问题的范围）。所有这些都运行良好，只是关于当用户悬停在提示本身上时如何停止它的部分没有起作用！

编辑：对于那些想要查看完整脚本以及为什么必须使用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(); });
        });

- Cameron

---

你应该使用.hide()而不是.remove()吧？ - Sang Suantak

不，因为我想将其从DOM中移除！ - Cameron

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 - 您只需要一个地方来存储计时器的引用。

- Elliot Nelson

---

只是顺便提一下，在最新版本的JQuery中，.live()已被弃用，您应该使用.on()。 - xorinzor

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

- Sedat Başar

---

无法这样做，因为我需要在我的hover()函数中使用两个函数，请参见我的更新后的OP以获取真实脚本示例。 - Cameron

所以再检查一遍，也许这个会有帮助 :) - Sedat Başar

Answer 3

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

- Stryder

---

实际上，我确实想将其从DOM中删除！ - Cameron