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

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 属性非常好而且很简单。