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

这个问题似乎与

但仍然不完全如此。事情是这样的：我正在写一个小图库，在某个时候用户点击了一个缩略图。图像的大版本显示为全屏幕的内部。到目前为止，一切顺利。当鼠标悬停在上面时，我会显示三个图像：close、left、right，用于浏览相册；当鼠标离开图像或导航图像时，三个导航图像会淡出

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

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

但是，这会产生一种奇怪的闪烁效果，因为在主图像的mouseleave（）上，我隐藏了三个小图像，由于重叠，并且鼠标仍然位于主图像的顶部，这会立即触发主图像的鼠标指针

为了避免这种情况，我试图确定，当鼠标离开主图像时，鼠标是否移动到了一个小的重叠图像上。为此，我使用了以下代码：

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（）之类的选择器来说，这并不能完全起作用。

您可以尝试以下方法：

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

---

以下是我最后做的事情。我在幻灯片放映中使用了四种图像：主图像，然后是左、右、关闭按钮图像

main_img = $("<img ... class='main-photo slide-show'/>");
close_img = $("<img ... class='nav-button slide-show'/>");
left_img = $("<img ... class='nav-button slide-show'/>");
right_img = $("<img ... class='nav-button slide-show'/>");

其中placeShow（）将导航按钮移动到各自的位置。该功能定义如下：

$.fn.placeShow = function() {
  var pos = main_img.position();
  var left = pos.left;
  var top = pos.top;
  var width = main_img.width();
  var height = main_img.height();

  close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
  left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
  right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}

到目前为止，这在Safari、IE、FF、Chrome（好吧，我在这里得到的版本…）上都有效

让我知道你的想法，如果我可以修剪这段代码更多，或者如果有其他解决方案，将更优雅/快速。所有这些的最终结果现在都在我的网站上

---

Jens

试着摆弄一下这个：它在Safari和Chrome上运行良好，但在FireFox的小图像上悬停，它会疯狂地闪烁。这不仅仅是一个jQuery问题，这是一个常识问题，让我发疯。你可能会认为，有某种方法可以区分离开物体与留在物体内部，只是在物体上方有另一个物体。我非常感谢能为这个问题提供一个通用的解决方案。谢谢，这个演示也适用于FF。让我把它改编成我的代码，看看它是如何运行的。但是有一个问题：使用上面提到的jQuery选择器$（“#main，#small”）或者从var img=$（“”）返回的直接引用更快吗？@TheSysRestart:查看我对原始问题的编辑。你的方法有效；但是，我首先需要放置较小的image.Dang，而不是.show（）。在屏幕上效果很好，但在没有真正“悬停”或鼠标移动/离开的移动设备上根本不起作用。又当了。现在怎么办？苹果提出的添加onclick=“void（0）”处理程序（）的方法在这里也没有什么区别。我不确定我是否想让导航按钮一直可见。移动设备上的条件代码？这就是我最后要做的：如果我检测到代码在移动设备上运行，那么按钮就会一直显示。很好用。

$.fn.placeShow = function() {
  var pos = main_img.position();
  var left = pos.left;
  var top = pos.top;
  var width = main_img.width();
  var height = main_img.height();

  close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
  left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
  right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}