0

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

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

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

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

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

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

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

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

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

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

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

4

1 回答 1

0

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

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

于 2017-02-27T00:05:24.637 回答