忽略叠加图像上的鼠标交互
我有一个hover效果的菜单栏，现在我想放置一个圆形的透明图像和一个“一手拉”文本的菜单项之一。 如果使用绝对定位将叠加图像置于菜单项上方，用户将无法单击该button，hover效果将不起作用。
有没有办法以某种方式禁用鼠标与此叠加图像的交互，以便菜单将继续像以前一样工作，即使它在图像下方？
编辑：
因为菜单是用joomla生成的，所以我无法调整其中一个菜单项。 即使我可以，我不觉得JavaScript解决scheme是适当的。 所以最后我用menu-item元素外面的箭头“标记”菜单项。 不如我想要的那么好，但是无论如何它都能解决问题。
我发现的最好的解决scheme是CSS样式：
#reflection_overlay { background-image:url(../img/reflection.png); background-repeat:no-repeat; width: 195px; pointer-events:none; } pointer-events属性工作得很好，很简单。
给button一个比手绘图像更高的z-index属性：
<img src="hand_drawn_image.gif" style="z-index: 4"> <a href="#" style="z-index: 5"></a>
但是，请确保您在所有主stream浏览器中进行testing。 IE解释Z-index与FF不同。 对于有人想出更多的细节，你将不得不张贴更多的信息，一个链接将是最好的。
所以我这样做，它在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。 这样用户点击被捕获在整个框中。
testing时您将需要提供自己的图像。 🙂
注意：如果你期望你的菜单button响应用户交互（例如，改变颜色来模拟一个button），那么你将需要额外的代码附加到你将在标签上调用的JavaScript，这个额外的代码可以解决“ menuOption“元素通过DOM并改变它的颜色。
此外，我没有其他的方式知道你可以点击事件，并将它注册到可见页面元素下面的元素上。 我今年夏天也试过这个，但是没有find其他解决办法。
希望这可以帮助。
PS：在quirksmode的事件的写作大大帮助我了解事件在浏览器中的行为。
build立在佩卡·加泽尔（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>
