如何使用鼠标点击绝对定位的图像区域地图？ [英] How to make absolute positioned image area maps clickable with mouse?

问题描述

我使用绝对定位将多个图像放在彼此的顶部。这些图像是部分透明的，并且有一个html 区域和 map ，只能使可见部分可点击。在jQuery中，我将鼠标事件附加到区域标记。

I have several images positioned on top of each other using absolute positioning. These images are partially transparent, and have a html area and map to make only the visible parts clickable. In jQuery, I have attached mouse events to the area tags.

这适用于一个图像：mouseenter和只有在输入图像的映射部分时，mouseleave才会触发。

This works well for one image: mouseenter and mouseleave fire only when the mapped part of the image is entered.

问题是它只适用于顶部图像。对于所有其他人来说，它不会触发事件而不是CSS悬停工作，因为它上面还有另一个图像。尽管区域 s不重叠， map s位于图像前面。

The problem is that it only works for the top image. For all others, it doesn't fire events not does CSS hover work, because there is another image on top of it. This despite the fact that the areas do not overlap and maps are in front of the images.

以下是该问题的演示： http：// markv。 nl / stack / imgmap2 /

Here is a demonstration of the problem: http://markv.nl/stack/imgmap2/

推荐答案

您可以在所有单个图像的顶部放置一个完全透明的图像，并将所有图像映射区域附加到该图像。它将作为鼠标事件的捕获元素，您仍然可以更改所有单个图像。

You can place a single, completely transparent image on top of all individual images, and attach all imagemap areas to that image. It will act as a capturing element for the mouse events, and you can still change all individual images.

这篇关于如何使用鼠标点击绝对定位的图像区域地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！