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

Question

对于一个待开发的页面，我试图将jQuery / jQueryUI函数和插件（＆＃34; draggable＆＃34;和＃34; maphighlight＆＃34;）与图像映射和CSS动画缩放触发相结合通过jQuery点击添加和删除一个类：

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

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

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

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

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

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

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

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

我后来的意图是让真实图像和多边形地图区域比图像小，并且只覆盖那些图像的部分（它们显示的东西的形状），因此将jQuery addClass功能分配给图像本身不是一种选择。

如何在悬停时将这些区域置于图像之上？

Answer 1

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

我能让它工作的唯一方法是将每个图像放在自己的"seasons": []容器中，并为每个图像创建一个单独的图像映射。这需要更多代码，但它可以工作。