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

时间:2012-05-18 05:34:29

标签: javascript jquery jquery-hover

这个问题似乎与

有些相关

但仍然不完全。事情就是这样:我正在写一个小画廊,在某些时候用户点击缩略图。图像的大版本显示为全屏幕内部。到现在为止还挺好。当鼠标悬停在上面时,我会显示三个图像:关闭,左,右,用于浏览相册;当鼠标离开图像导航图像时,三个导航图像会消失。

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

只要鼠标从主图像侧面移动,或从主图像移动到三个小重叠图像中的一个上,鼠标移动就会触发。 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()这样的选择器来说,这并不是很有效。

2 个答案:

答案 0 :(得分:2)

你可以试试这个:

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

DEMO

答案 1 :(得分:1)

这是我最终做的事情。我在幻灯片放映中使用了四张图像:主图像,然后是左,右,关闭按钮图像。

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上有效(好吧,我在这里的版本......)

让我知道你的想法,如果我可以更多地修改这些代码,或者是否有更优雅/更快的替代解决方案。所有这些的最终结果现在在我的网站上。