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

Question

对于待开发的页面，我正在尝试将 jQuery/jQueryUI 函数和插件（"draggable" 和 "maphighlight"）与图像映射和 CSS 动画相结合通过单击 jQuery 添加和删除 class 触发缩放：

代码片段太多了，所以我创建了一个codepen：

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

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

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

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

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

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

我稍后的意图是拥有真实的图像和比图像小的多边形地图区域，并且只覆盖这些图像的一部分（它们显示的东西的形状），所以分配 jQuery addClass 图像本身的功能不是一个选项。

当鼠标悬停时，我该怎么做才能使这些区域位于图像之上？

Answer 1

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

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

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

using maphilight, imagemap areas should cover absolutely positioned images

css

jquery-ui

jquery-plugins

imagemap

maphilight