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 按预期触发每个小的重叠图像。

但是，这会产生一种时髦的闪烁效果，因为在主图像的 mouseleave 上，我隐藏了三个小图像，由于重叠并且鼠标仍然位于主图像的顶部，因此会立即触发主图像的 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 伪类？

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

我该如何解决这个问题？谢谢!

编辑:我可能需要澄清:在显示导航按钮之前，我设置了它们各自的左侧和顶部属性，以便将它们放置在主图像的位置上。这意味着我需要做一些工作才能在 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