忽略叠加图像上的鼠标交互

我有一个带有hover效果的菜单栏，现在我想在其中一个菜单项上放置一个带圆圈和“一手拉”文字的透明图像。如果我使用绝对定位将叠加图像放在菜单项上方，则用户将无法单击该按钮，并且hover效果将不起作用。

有没有办法以某种方式禁用与此叠加图像的鼠标交互，以便菜单将继续像以前一样工作，即使它在图像下面？

编辑：

因为菜单是用joomla生成的，所以我无法调整其中一个菜单项。即使我可以，我也不觉得javascript解决方案是合适的。所以最后我用menu-item元素外面的箭头“标记”了菜单项。不像我想要的那样好，但无论如何它都成功了。

我发现的最佳解决方案是使用CSS样式：

#reflection_overlay { background-image:url(../img/reflection.png); background-repeat:no-repeat; width: 195px; pointer-events:none; }

pointer-events属性工作得很好而且很简单。

为按钮提供比手绘图像更高的z-index属性：

但是，请确保在所有主流浏览器中测试它。 IE不同于FF解释z-index。如果有人想出更多细节，你必须发布更多信息，链接最好。

所以我做了这个，它适用于Windows XP上的Firefox 3.5。它显示了一个包含一些文本，图像叠加层和上方透明div的框，可以拦截所有点击。

  sometext goes here.

我做了什么：我已经精心设计了一个div并将其调整为菜单选项的大小，100x40px（任意值，但它有助于说明样本）。

div具有图像叠加和链接叠加。该链接包含一个div，其大小与’menuOption’div相同。这样，在整个框中捕获用户点击。

测试时，您需要提供自己的图像。 🙂

警告：如果您希望菜单按钮响应用户交互（例如，更改颜色以模拟按钮），那么您将需要附加到您将在标签上调用的javascript的额外代码，这个额外的代码可以解决’ menuOption’元素通过DOM并改变它的颜色。

此外，我没有其他方式可以识别您可以执行单击事件，并将其注册到可见页面元素下的元素上。今年夏天我也尝试了这个，除此之外没有找到其他解决办法。

希望这可以帮助。

PS：在quirksmode上对事件的写作有很长的路要走，以帮助我理解事件在浏览器中的行为方式。

以Pekka Gaiser所说的为基础，我认为以下内容可行。以他为榜样并重新改造：

在这里你应该能够在底层的a-tag上放置一个事件，除非你的图像有一个事件，否则启动捕获（！IE浏览器），然后杀死事件的传播。

如果您需要更多帮助，请告诉我们有关情况的更多信息。

如果图像将静态定位，则可以通过将img标记放在菜单项元素内来捕获图像中的单击事件。