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

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 属性非常好,很简单.