2

这个问题似乎与

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

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

只要鼠标从主图像离开侧面，或从主图像移到三个重叠的小图像之一上，mouseleave 就会触发。mouseenter 会按预期触发每个小的重叠图像。

但是，这会产生一种时髦的闪烁效果，因为在主图像的 mouseleave 上我 hide() 三个小图像，由于重叠并且鼠标仍然在主图像的顶部，这会立即触发主图像的 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。进一步研究帖子，似乎“：悬停”是这里的问题，因为它不是正确的选择器表达式，而是 CSS 伪类？

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

我该怎么做？谢谢！

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

4

2 回答 2

2

You can try with this:

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

DEMO

于 2012-05-18T06:54:15.287 回答
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 上都有效（嗯，我在这里得到的版本......）

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

延斯

于 2012-05-19T15:46:27.080 回答