jQuery：当不悬停在元素 X 或 Y 上时，隐藏 Y？

Question

我有几张图像并排排列在一起，每当我悬停其中一张图像时，就会出现该图像的工具提示（包含一些信息等）。工具提示信息是用 ajax 加载的，但这无关紧要。

问题是当我将鼠标悬停在其中一个图像时会加载工具提示，而当我将鼠标悬停在它之外时它就会消失。所以我无法将鼠标悬停在工具提示上，我需要这样做。

所以我想到了记录我在对象中悬停的每个元素的解决方案。像这样：

$('*').mouseenter(function() {
    currently_hovering = $(this);
});

然后当我将鼠标悬停在图像外时，检查鼠标是否悬停在工具提示上，如果是，则什么也不做，如果不是，则隐藏工具提示。听起来不错，对吧？但是由于某种原因，每当我将鼠标悬停在工具提示上时，它都会拒绝记录。它仍然像我在图像上一样（但是当我在其中移动鼠标时，工具提示会严重闪烁）。

我假设它没有记录工具提示，因为它是绝对定位的？它位于图像上方（这样我就可以将鼠标移动到它而不隐藏它）。我试过使用 mouseenter/mouseover 和 hover，结果都一样。

有解决办法吗？

Answer 1

部分问题可能是您使用 ajax 加载信息。

您需要对正常页面加载后添加到页面的数据使用 live() 函数，以便脚本处理所述数据。

有点像：

    $('.day').live('mouseover mouseout',function(e) {
        if (e.type === 'mouseover') {
            $(this).addClass('day-hover');
        } else {
            $(this).removeClass('day-hover');
        }
    });

Answer 2

闪烁是因为当您将鼠标移到工具提示上时，您不再将鼠标悬停在该图像上并且正在移除它，然后当它被移除时，您突然再次将鼠标悬停在该图像上，所以它重新- 出现。

当您将鼠标悬停在工具提示上时，听起来像在工具提示的 onmouseover 之前调用图像的 onmouseout 调用，因此您的 currently_hovering 变量未设置为工具提示。

当您将鼠标悬停在图像之外时，您可以尝试使用超时吗？即使是 0 秒的超时也可能起作用，这足以让浏览器在检查 currently_hovering 的值之前处理已悬停的工具提示？

Answer 3

也许您可以将您的图像包装到例如<div> 标记中，让 jquery 在该 div 标记的悬停时“侦听”并将您的工具提示添加到该标记中图像本身之后。然后将鼠标悬停在工具提示上不应导致闪烁，因为您“不离开”导致它可见的 div。类似的东西

<div class="imageWrapper">
  <img src="source" />
  <span class="tooltip">tooltip text</span>
</div>

那么 js 会是这样的

$('div.imageWrapper').hover(function(){
  var tooltipText = callWhateverMethodToLoadTooltipText();
  if($('span.tooltip',$(this)).length == 0)
    $(this).append('<span class="tooltip">' + tooltipText + '</span>');
  else
    $('span.tooltip',$(this)).text(tooltipText).show();
}, function(){
  $('span.tooltip', $(this)).hide();
});