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

Question

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

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

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

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

然后当我将鼠标悬停在图像之外时，检查鼠标是否悬停在工具提示上，如果是，则不执行任何操作，如果不是，则隐藏工具提示。听起来不错，对吧？但由于某种原因，每当我将鼠标悬停在工具提示上时，它都会拒绝记录。它仍然表现得好像我在图像上一样（但是当我在图像中移动鼠标时，工具提示会闪烁得很厉害）。

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

对此有什么解决办法吗？

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

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

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

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

Answer 3

也许您可以将图像包装到

标签中，让 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();
});