107

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Daniel
  • 1,417
  • 2
  • 12
  • 20

5 Answers5

268

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.

Francisco
  • 10,918
  • 6
  • 34
  • 45
DZenBot
  • 4,806
  • 2
  • 25
  • 27
  • Yup -- This is the good stuff. It also works in suppressing hit-testing for elements with no backgrounds set that are being used as containers for other items (that you actually do want to hit-test.) – Armentage Feb 08 '12 at 05:22
  • 4
    Keep in mind that pointer-events isn't supported by all major browsers yet. IE doesn't support it (surprise...), and I think Safari doesn't support it either. – Hatchmaster Oct 09 '12 at 16:22
  • 3
    Safari is ok, according to this http://caniuse.com/#search=pointer-events, only Opera and iE are out – Logic Wreck Oct 24 '12 at 14:15
  • would like to ignore cursor too – William Entriken Jun 18 '14 at 15:29
  • 1
    Works well with d3 and svg also. Solved an issue for me where the focus box grew to large to the point where it was under the mouse. – Michael Hobbs Nov 28 '15 at 13:29
  • I've used this solution on a Cordova Project and it runs like a charm! Awesome solution. Thanks – Fábio Nicolau de Lima Aug 22 '17 at 18:28
  • And if you set child elements of your overlay as `pointer-events : auto` they can pick up events as normal, which is useful. – Jon Sep 07 '19 at 04:15
2

So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.

<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>

What I've done: I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).

The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.

You will need to provide your own image when testing. :)

Caveat: If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.

Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.

Hope this helps.

PS: The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.

Mike Mytkowski
  • 596
  • 2
  • 8
1

Give the button a higher z-index property than the hand-drawn image:

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

however, make sure you test it in all major browsers. IE interprets z-index differently from FF. For somebody to come up with more details, you would have to post more info, a link would be best.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
0

Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:

<a href="#" style="z-index: 5">
    <!-- Place image inside of you menu bar link -->
    <img src="hand_drawn_image.gif" style="z-index: 4">
    <!-- Your link here -->
</a>

Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.

If you need a bit more help, let us know a bit more about the situation.

jeremyosborne
  • 1,072
  • 1
  • 10
  • 17
0

If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>
bogphanny
  • 1