不可见元素不接收鼠标事件

Question

我正在用 jquery 为一个网站编写一个样本选择器，允许您指定座套的颜色。选择器由缩略图网格组成，当用户将鼠标悬停在每个缩略图上时，顶部会显示更大的图像。

现在的问题是，客户希望被覆盖的更大图像部分或完全遮挡的图像仍然能够响应事件。

我对这个问题的解决方案是添加一个预览元素，以将更大的图片显示到 z 索引为 5 的列表中。然后，我将克隆样本列表中的原始元素集，并将它们覆盖为带有 z 的不可见元素-index 为 10。结果是部分被遮挡的元素似乎仍然响应鼠标事件，但实际上底层元素没有附加事件。这些事件实际上附加到预览元素前面的不可见元素（我希望这是有道理的！）。

我第一次尝试实现这种效果是让克隆元素获得visibility:hidden CSS 样式，但这些元素不响应鼠标事件。我尝试使用背景为透明的空元素，这似乎工作正常，但在 IE9 中测试表明这些元素也不响应鼠标事件！

如果我从覆盖元素中删除背景：透明样式，我就可以让它工作，当然现在它们遮盖了下面的所有内容。

目前看来只有IE9有这个问题。 IE8 似乎可以很好地触发透明项目上的事件。它似乎在 FireFox 和 Chrome 中也能按预期工作。

Answer 1

最终的解决方案简单得令人恼火。所需要的只是为不可见元素提供以下样式：

background-color: white;
opacity: 0;
filter: alpha(opacity=0); /* for old IE versions */

这使得元素不可见，但仍然响应鼠标事件。

Answer 2

我将为此使用双重绑定技术，其中鼠标悬停绑定到后面的图像，而out绑定到前面的图像。这允许您隐藏前面的图像，直到悬停后面的图像。

// use $.fn.each so that each thumb gets its own timer.
$(".thumb-behind").each(function(){
  var timer;
  $(this).hover(function(){
    $(this).next().stop(true,true).fadeIn();
  },function(){
    timer = setTimeout(function(){
      $(this).next().stop(true,true).fadeOut();
    },10);
  });

  $(this).next().hover(function(){
    clearTimeout(timer);
  },function(){
    $(this).stop(true,true).fadeOut();
  });
});

只需确保修改 $(this).next() 以选择相对于当前缩略图较大的缩略图。