javascript - 如何解决 jQuery 中鼠标悬停在重叠图像上的问题？

Question

这个问题好像有点相关

• How do I check if the mouse is over an element in jQuery?
• jQuery check hover status before start trigger

但还不完全是。事情是这样的:我正在写一个小画廊，在某个时候用户点击了一个缩略图。图像的大版本显示为全屏的内部。到目前为止，一切都很好。当鼠标悬停在上面时，我会显示三个图像:关闭、左侧、右侧，用于在相册中导航；当鼠标离开图像或导航图像时，三个导航图像淡出。

这三个导航图像与主图像部分重叠，例如关闭图像是左上角的圆圈。这就是棘手的部分。

每当鼠标从主图像移到侧面，或从主图像移动到三个重叠的小图像之一时，就会触发 mouseleave。 mouseenter 按预期触发每个小的重叠图像。

但是，这会产生一个时髦的闪烁效果，因为在主图像的鼠标离开时我隐藏了三个小图像，这会立即触发主图像的 mouseenter，因为重叠并且鼠标仍在主图像之上图片。

为避免这种情况，我尝试确定在鼠标离开主图像时，鼠标是否已移到其中一个小的重叠图像上。为此，我使用了这段代码:

main_img.mouseleave(function() {
  if (!hoverButtons()) {
    doHideButtons();
  }
});

function hoverButtons() {
  return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}

这在 Safari 和 Chrome 上效果很好，但在图像仍然闪烁的 FF 和 IE 上效果不佳。进一步研究帖子，似乎“:hover”是这里的问题，因为它不是一个正确的选择器表达式，而是一个 CSS 伪类？

我尝试使用在鼠标输入/鼠标离开各种图像时打开/关闭的开关，但这也不起作用，因为事件似乎以不同的顺序触发。

我该怎么做？谢谢!

编辑:我可能需要澄清一下:在显示导航按钮之前，我设置了它们各自的 left 和 top 属性，以便根据主图像的位置放置它们。这意味着我需要做一些工作才能在 jQuery 选择器上调用 .show() 。我尝试添加一个新函数 .placeShow()，但对于 $(".nav-button:hidden").placeShow() 这样的选择器来说，它不太适用。

Answer 1

你可以试试这个:

$("#main, #small").mouseenter(function() {
    $("#small:hidden").show();
}).mouseleave(function(e) {
    if(e.target.id != 'main' || e.target.id != 'small') {
      $('#small').hide();
    }
});

DEMO