我有一个带有悬停效果的菜单栏，现在我想在其中一个菜单项上放置一个带有圆圈和“手绘”文本的透明图像。如果我使用绝对定位将叠加图像放置在菜单项上方，用户将无法单击按钮并且悬停效果将不起作用。
有没有办法以某种方式禁用鼠标与此叠加图像的交互，以便菜单即使在图像下方也能像以前一样继续工作？
编辑：
因为菜单是用 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 有一个图像叠加层和一个链接叠加层。该链接包含一个大小与“menuOption”div 相同的 div。通过这种方式，整个框都会捕获用户点击。
测试时您需要提供自己的图像。:)
警告：如果您希望菜单按钮响应用户交互（例如，更改颜色以模拟按钮），那么您将需要附加到将在标签上调用的 javascript 的额外代码，此额外代码可以解决“ menuOption' 元素通过 DOM 并改变它的颜色。
此外，我知道没有其他方法可以获取单击事件，并将其注册到可见页面元素下方的元素上。今年夏天我也试过这个，除了这个没有找到其他解决方案。
希望这可以帮助。
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 标签上放置一个事件，除非您的图像有事件，否则会启动捕获（！IE 浏览器），然后终止事件的传播。
如果您需要更多帮助，请告诉我们更多有关情况的信息。
如果图像将被静态定位，您可以通过将 img 标签放置在菜单项元素内来捕获图像冒泡时的点击事件。
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>