（CSS）表元素重疊並隱藏地圖區域

我有一個div（其具有position: relative;）並且它包含3子元素。第一子元件是image，第二子元件爲在上述圖像的image-map（和該映射具有鏈節2場區域），其工作時懸停在圖像和第三子元件是table（重疊整個圖像{目的}），並自然是position: absolute; top: 0;。（也是table具有3種<tr>元素）（CSS）表元素重疊並隱藏地圖區域

問題如下：因爲該表元素重疊的整個圖像，它也重疊map area's和它們不能被hover（所以當鼠標懸停在圖像被觸發地區地圖是什麼都沒有發生，因爲桌子在他們身上）。

它看起來是這樣的：

<div class="some class"> 
    <img class="some class" src="/image.png" use="mapname"/> 
    <map name="random map name"> 
    <area href="some link" shape="rect" coords="some numbers"> 
    <area href="some link" shape="rect"coords="some numbers"> 
    </map> 
    <table> 
    <tbody> 
    <tr><td></tr> 
    <tr><td></tr> 
    <tr><td></tr> 
    </tbody> 
    </table> 
</div>

任何想法我怎麼能強迫地圖地區工作？

重要！：絕對不會對DOM樹進行任何更改，生成完整的代碼並使其響應地工作。 [所以只能做CSS實現]。

我很感激幫助:)

來源

2014-04-17 Aca85

''需要''。 –

你能提供一個小提琴嗎？ –

這裏有什麼幫助解決了這個問題嗎？ – Askanison4

在桌子上設置z-index會對您有幫助嗎？

你的CSS可能看起來像：

.some_class table { 
    z-index: -1000; 
}

或者，如果表格單元格正確對齊與影像地圖，你能不能把疊加/懸停事件在桌子上也？

來源

2014-04-17 14:49:02 Askanison4

不，它不會。因爲如果你這樣做，那麼圖像將在頂部並隱藏表格元素（表格中充滿了文字，我忘記提及這一點）。 – Aca85

在這種情況下，您需要將懸停事件放到表格上而不是圖像上。如果沒有Javascript，你不能從下面冒泡事件，以便CSS選擇器被激活。 – Askanison4

（CSS）表元素重疊並隱藏地圖區域

回答

相關問題