Question

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

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

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

我实现此效果的第一次尝试是克隆元素获得可见性：隐藏的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（）以选择与当前缩略图相关的较大缩略图。

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

2 个答案: