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

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

有什么办法可以禁用鼠标与此覆盖图像的交互，以使菜单即使在图像下方也能像以前一样继续工作？

编辑：

因为菜单是使用joomla生成的，所以我无法仅调整菜单项之一。即使可以，我也不认为使用javascript解决方案是合适的。因此，最后我在菜单项元素外部用箭头“标记”了菜单项。不像我想要的那样好，但是无论如何它还是可行的。

我发现最好的解决方案是CSS样式：

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

pointer-events 属性效果很好，很简单。

所以我做到了，它可以在Windows XP的Firefox 3.5中使用。它显示了一个带有一些文本的框，一个图像叠加层以及一个上方的透明div，可拦截所有点击。

<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>

我做了什么：我制作了一个div并将其大小设置为菜单选项可以调整的大小，即100x40px（任意值，但这有助于说明示例）。

div具有图像叠加层和链接叠加层。链接包含一个div，其大小与“ menuOption” div相同。这样一来，用户的点击就会在整个框内被捕获。

测试时，您将需要提供自己的图像。:)

注意事项：如果您希望菜单按钮能够响应用户交互（例如，更改颜色以模拟按钮），那么您将需要附加代码，这些代码将附加到将在标签上调用的javascript，此代码可以解决“ menuOption”元素，然后更改其颜色。

另外，我没有其他方法知道可以单击事件，并将其注册在可见页面元素下方的元素上。今年夏天，我也尝试过此方法，但除此以外，没有找到其他解决方案。

希望这可以帮助。

PS：在quirksmode上记录事件很长的路要走，可以帮助我了解事件在浏览器中的行为。

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

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

但是，请确保您在所有主流浏览器中对其进行测试。IE对z-index的解释与FF不同。对于有人想提供更多细节，您必须发布更多信息，最好是链接。

根据Pekka Gaiser所说的话，我认为以下方法会起作用。以他为榜样并重做它：

<a href="#" style="z-index: 5">
    <!-- Place image inside of you menu bar link -->
    <img src="hand_drawn_image.gif" style="z-index: 4">
    <!-- Your link here -->
</a>

在这里，您应该能够在基础a-tag上放置一个事件，并且除非您的图像中有事件，否则应启动捕获（！IE浏览器），然后终止该事件的传播。

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

如果图像将被静态放置，则可以通过将img标签放置在菜单项元素中，从而在图像冒泡时捕获单击事件。

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>