（CSS）表元素重叠并隐藏地图区域

Question

我有一个div（有position: relative;），它包含3个子元素。第一个子元素是image，第二个子元素是上面图像的image-map（并且地图有2个具有链接的区域字段），当在图像上方盘旋时起作用，第三个子元素是table（重叠于整个图像{故意}}并且自然是position: absolute; top: 0;。 （也是table有3个<tr>元素）

问题如下：因为表格元素与整个图像重叠，它也与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实现]。

我很感激帮助:)

Answer 1

在表上设置z-index会对你有帮助吗？

你的CSS可能看起来像：

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

或者，如果表格单元格与您的图像映射正确对齐，您是否也可以将叠加/悬停事件放在表格上？