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

Question

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

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

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

我第一次尝试实现这种效果是为了让克隆的元素获得可见性:隐藏的 CSS 样式，但这些元素不响应鼠标事件。我尝试使用 background: transparent 的空元素，这似乎工作正常，但在 IE9 中测试显示这些元素也不响应鼠标事件!

如果我从覆盖元素中删除背景:透明样式，我就可以让它工作，当然现在机器人会掩盖下面的所有内容。

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

Answer 1

最终的解决方案非常简单。所需要的只是为不可见元素提供以下样式:

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

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