忽略覆盖图像上的鼠标交互

我有一个悬停效果菜单栏，现在我想把一个透明的图像与一个圆圈和“手绘”的文字在其中一个菜单项。如果我使用绝对定位放置覆盖图像上方的菜单项，用户将无法点击按钮和悬停效果将不起作用。

有没有什么方法可以禁用鼠标与这个叠加图像的交互，以便菜单将继续工作，就像以前一样，即使它在一个图像下面？

编辑:

因为这个菜单是用 Joomla 生成的，所以我不能只调整其中的一个菜单项。即使我可以，我也不认为 Javascript 解决方案是合适的。所以最后我在菜单项元素外面用箭头“标记”了菜单项。虽然没有我想象中的那么好，但还是挺好的。

83227 次浏览
小开

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.

小开

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.

小开

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.

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

小开

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>
小开
最佳答案

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.


提交答案