Ignore mouse interaction on overlay image

Question

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.

Answer 1

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 is simple.