忽略重叠图片上的鼠标互动 [英] Ignore mouse interaction on overlay image

问题描述

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

有什么方法可以禁用鼠标与此重叠式图片的互动，以便即使图片位于图片下方，菜单仍会继续工作？

编辑：

因为菜单是用joomla生成的，我不能只调整一个菜单项。即使我可以，我没有觉得一个javascript解决方案是适当的。所以最后我用菜单项元素外面的箭头标记菜单项。

解决方案

这可能太晚了，因为这可能太晚了。 ，但我发现的最佳解决方案是使用CSS Styling：

  #reflection_overlay {
 background-image：url （../img/reflection.png）; 
 background-repeat：no-repeat; 
 width：195px; 
 pointer-events：none; 
} 
  

pointer-events属性非常好用。

I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.

Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?

Edit:

Because the menu was generated with joomla I could not tweak just one of the menu items. And even if I could, I did not feel a javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.

解决方案

It might be too late for this, but the best solution I've found is with CSS Styling:

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

"pointer-events" attribute works pretty good and simple.

这篇关于忽略重叠图片上的鼠标互动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！