指针事件：none - 试图点击 PNG 下方的 iframe

Question

我正在尝试将 "pointer-events: none" 设置为半透明的 PNG，以便能够导航放置在该 PNG 下方的 iframe（它是一个 Google 地图）。我尝试将 "pointer-events: auto" 提供给 iframe，并将 "pointer-events: none" 提供给父级 div，但它的 none 允许点击。

有关信息，iframe 是绝对定位的，而 png 和父级 div 都是相对的。

HTML 非常简单：

<div class="wrapper">

<iframe class="map" src="https://www.google.com/maps/d/embed?mid=zZ48oPOpCSZo.khyS2koft-Ss"></iframe>

<img src="http://thehermitcrab.org/wp-content/uploads/manual-uploads/the-story/hey-there-bottom-1366.png"/>

</div>

这是 css：

.wrapper {
    position: relative;
}

.wrapper img {
    pointer-events: none;
    display: block;
    position: relative;
}

.map {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

}

这是网站：

www.thehermitcrab.org （向下滚动一点点，您会看到地图）

在此先感谢您！

Answer 1

iframe 的 z-index 为 -1，这似乎导致它忽略鼠标事件，尽管设置了 pointer-events。将其更改为至少 0 并让图像具有更大的 z-index。

指针事件：none - 试图点击 PNG 下方的 iframe

Pointer-events: none - trying to click on iframe beneath PNG

css

iframe

png

pointer-events