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

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 属性效果很好，很简单。