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

How to resolve mouse hover on overlapping images in jQuery?

本文关键字：重叠 悬停 图像 问题 鼠标 何解决 解决 jQuery      更新时间：2023-09-26

这个问题似乎与

  • 如何检查鼠标是否在jQuery中的元素上？
  • j查询启动前检查悬停状态

但仍然不完全是。 事情是这样的：我正在写一个小画廊，在某些时候用户点击缩略图。 图像的大版本显示为全屏内部。 目前为止，一切都好。 当鼠标悬停在该图像上时，我会显示三个图像：关闭，左侧，右侧，用于浏览相册;当鼠标离开图像或导航图像时，三个导航图像将淡出。

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

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

然而，这会产生一种时髦的闪烁效果，因为在主图像的鼠标离开时，我隐藏了((三个小图像，由于重叠并且鼠标仍然在主图像的顶部，这立即触发了主图像的鼠标输入。

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

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'/>");

这里的类基本上是空的，但请帮助我根据上述答案进行选择。 然后显示主图像时没有导航按钮，我附加了这些事件处理程序函数：

$(".slide-show").mouseenter(function() {
  $(".photo-nav:hidden").placeShow();
});
$(".slide-show").mouseleave(function() {
  $(".photo-nav").hide();
});

其中 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上有效(好吧，我这里有的版本......

让我知道你的想法，如果我能更多地修剪这段代码，或者是否有更优雅/更快速的替代解决方案。 这一切的最终结果现在在我的网站上。

延斯

相关文章：