Question

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

有没有办法以某种方式禁用与此叠加图像的鼠标交互，以便菜单将像以前一样继续工作，即使它位于图像下方？

编辑：

因为菜单是用joomla生成的，所以我无法调整其中一个菜单项。即使我可以，我也不觉得javascript解决方案是合适的。所以最后我用菜单项元素外面的箭头“标记”了菜单项。不像我想要的那样好，但无论如何它都成功了。

Answer 1

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

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

pointer-events属性非常好用且很简单。

Answer 2

所以我做了这个，它适用于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'元素通过DOM并改变它的颜色。

此外，我没有其他方式可以识别您可以执行单击事件，并将其注册到可见页面元素下面的元素上。今年夏天我也试过这个，除此之外没有找到其他解决办法。

希望这有帮助。

PS： quirksmode上的事件写入有很长的路要走，以帮助我理解事件在浏览器中的行为。

Answer 3

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

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

但是，请确保在所有主流浏览器中测试它。 IE不同于FF解释z-index。如果有人想出更多细节，你必须发布更多信息，链接最好。

Answer 4

以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浏览器），然后杀死事件的传播。

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

Answer 5

如果图像将静态定位，您可以通过将img标记放在菜单项元素中来捕获图像中的点击事件，因为它会冒泡。

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

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

5 个答案: