Ignore mouse interaction on overlay image

javascript html css xhtml javascript-events
Daniel picture Daniel · Nov 1, 2009 · Viewed 72.7k times · Source

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

DZenBot picture DZenBot · Dec 21, 2011

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.

Related questions

Should I use "]]>" or "//]]>" for closing a CDATA section into xHTML

I want to inline scripts or CSSs into XHTML without escaping special characters. I can do that using a CDATA marked section. According to http://www.w3.org/TR/xhtml1/#h-4.8 the CDATA section can be defined as: <script …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More