我有一个带有悬停效果的菜单栏，现在我想在其中一个菜单项上放置一个带有圆圈和“手绘”文本的透明图像。如果我使用绝对定位将覆盖图像放在菜单项上方，用户将无法单击按钮并且悬停效果将不起作用。
有没有办法以某种方式禁用鼠标与此覆盖图像的交互，以便即使菜单位于图像下方，菜单也能像以前一样继续工作？
编辑：
因为菜单是用 Joomla 生成的，所以我不能只调整其中一个菜单项。即使我可以，我也不觉得 Javascript 解决方案是合适的。所以最后我用菜单项元素外的箭头“标记”了菜单项。没有我想要的那么好，但结果还是不错的。
【问题讨论】：
标签： javascript html css xhtml dom-events
我发现的最佳解决方案是使用 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 元素并改变它的颜色。
此外，据我所知，没有其他方法可以获取点击事件，并将其注册到可见页面元素下方的元素上。今年夏天我也试过这个，除了这个没有找到其他解决方案。
希望这可以帮助。
附言： 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>
【讨论】：