Javascript 忽略覆盖图像上的鼠标交互

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

是否有任何方法可以禁用鼠标与该覆盖图像的交互，以便即使菜单位于图像下方，也能像以前一样继续工作

编辑：

---

因为菜单是用Joomla生成的，所以我不能只调整其中一个菜单项。即使我可以，我也觉得Javascript解决方案并不合适。最后，我在菜单项元素外用箭头标记了菜单项。虽然没有我想要的那么好，但结果还是不错。

给按钮一个比手绘图像更高的z索引属性：

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

但是，请确保在所有主要浏览器中测试它。IE对z指数的解释与FF不同。

---

如果有人想提供更多的细节，你必须发布更多的信息，最好是有一个链接。

根据佩卡·盖泽所说的，我认为下面的方法会奏效。以他的例子为例，重新设计：

<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浏览器，然后终止事件的传播

---

如果您需要更多帮助，请让我们了解更多情况。

所以我这样做了，它在Windows XP上的Firefox 3.5中工作。它显示了一个包含一些文本的框、一个图像覆盖和一个透明的div，上面的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的额外代码，此额外代码可以通过DOM寻址“menuOption”元素并更改其颜色

而且，据我所知，没有其他方法可以让单击事件注册到可见页面元素下面的元素上。今年夏天我也尝试过这个，除了这个，我没有找到其他的解决办法

希望这有帮助

附言：

---

在上对事件的writeup有助于我了解事件在浏览器中的行为。

如果图像是静态定位的，则可以通过将img标记放置在菜单项元素中，在图像冒泡时从图像中捕获单击事件

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

---

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

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

---

指针事件属性工作得很好，也很简单。

这不会隐藏手绘图像吗？如果链接是透明的，就不会。是的，这是个好东西。它还可以抑制未设置背景的元素的命中测试，这些元素正被用作您确实希望命中测试的其他项目的容器。请记住，并非所有主流浏览器都支持指针事件。IE不支持它令人惊讶的…，我认为Safari也不支持它。Safari是可以的，根据这一点，只有Opera和IE愿意忽略光标，它也可以与d3和svg一起工作。为我解决了焦点框变大到鼠标下的问题。