，圖像映射區域應包括絕對定位的圖像

對於一個待開發的網頁我想結合的jQuery/jQueryUI的功能和插件（「拖動」和「maphighlight」）和圖像地圖和CSS動畫縮放觸發通過添加和通過jQuery上點擊刪除類：，圖像映射區域應包括絕對定位的圖像

它過多地放在一個片段，所以我創建了一個codepen：

我有一個可拖動的區域（#container5）另一容器內（#container3），它隱藏任何溢出（拖動它來查看效果）。

內部#container3還有一個容器（#container4），其含有四個圖像。這些都是絕對定位的，三個較小的是在裝載時填充整個容器的頂部。所有這些容器嵌套對於使用圖像映射和縮放來獲得拖動的能力是必需的。

現在基本的東西：所有圖像或多或少覆蓋地圖區域。當你將圍繞（而不是超過）懸停時，這些圖像變得可見。當點擊標記爲「SHRINK」的圖像周圍區域時，從#container4（即容器本身，4個圖像和地圖區域）向下的所有元素將縮小到其初始尺寸的60％，這是由CSS類添加jQuery結合CSS動畫。當點擊「重置」周圍的區域時，所有內容都將重置爲原始大小（但如果之前被拖動過，則不會重置到原始位置）。

我的問題是，我無法獲得地圖區域覆蓋徘徊的小圖像。我想這個CSS（和其他的變化），但它沒有任何效果，無論z-索引我使用的：

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

但地圖區域保持背後（小）圖片 - 點擊儘管圖像本身應該被可點擊的圖像地圖覆蓋，但圖像本身沒有影響。

我後來的目的是讓真實圖像和多邊形地圖區域比圖像更小，並且只覆蓋那些圖像的部分（它們顯示的東西的形狀），因此將jQuery addClass函數分配給圖像本身不是一種選擇。

我能做些什麼徘徊時，得到的圖像的頂部那些方面？

來源

2017-02-23 Johannes

所以，谷歌上搜索了幾天，嘗試一切後，回答我的問題，我能想到的：

我可以使它的唯一途徑是把每個圖像在自己的div容器，並創建一個單獨的圖像映射爲每個圖像。這需要更多的代碼，但它的工作原理。

來源

2017-02-27 00:05:24 Johannes

，圖像映射區域應包括絕對定位的圖像

回答

相關問題