使用 maphilight，imagemap 区域应该覆盖绝对定位的图像

Posted 2023-05-09

【中文标题】使用 maphilight，imagemap 区域应该覆盖绝对定位的图像

【英文标题】：using maphilight, imagemap areas should cover absolutely positioned images

【发布时间】：2017-07-14 06:13:18

【问题描述】：

对于一个待开发的页面，我正在尝试将 jQuery/jQueryUI 函数和插件（“可拖动”和“maphighlight”）与图像映射和 CSS 动画缩放相结合，通过点击时通过 jQuery 添加和删除类来触发：

放个sn-p实在是太多了，所以我创建了一个codepen：

http://codepen.io/anon/pen/xqxgrz

我在另一个容器 (#container3) 中有一个可拖动区域 (#container5)，它隐藏了任何溢出（拖动它以查看效果）。

在#container3 内部还有一个容器 (#container4)，其中包含四个图像。那些是绝对定位的，三个较小的在一个装满整个容器的顶部。所有这些容器的嵌套对于获得拖动、使用图像映射和缩放的能力都是必要的。

现在最重要的是：所有图像或多或少都被地图区域所覆盖。当您将鼠标悬停在围绕（而不是在上）小图像时，它们会变得可见。当单击标有“SHRINK”的图像周围的区域时，从#container4 向下的所有元素（即容器本身、4 个图像和地图区域）将缩小到其初始大小的 60%，这是由 CSS 类引起的由 jQuery 结合 CSS 动画添加。单击“RESET”周围的区域时，所有内容都会重置为原始大小（但如果之前已拖动，则不会重置为原始位置）。

我的问题是悬停时无法让地图区域覆盖小图像。我尝试了这个 CSS（以及它的其他变体），但无论我使用哪个 z-index，它都没有效果：

#container4 area 
  position: absolute;
  z-index:10000;

但是地图区域仍然在（小）图像之后 - 点击图像本身没有任何效果，尽管它应该被可点击的图像地图覆盖。

我稍后的意图是拥有比图像更小的真实图像和多边形地图区域，并且仅覆盖这些图像的一部分（它们显示的事物的形状），因此将 jQuery addClass 函数分配给图像他们自己不是一个选择。

当鼠标悬停时，我该怎么做才能让这些区域位于图像顶部？

【参考方案1】：

所以，在谷歌搜索了几天并尝试了我能想到的一切后回答我自己的问题：

我可以让它工作的唯一方法是将每个图像放在它自己的div 容器中，并为每个图像创建一个单独的图像映射。这需要更多的代码，但它确实有效。