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;
}

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

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

1 个答案: