0

我正在尝试将“指针事件：无”设置为半透明的 PNG，以便能够导航放置在该 PNG 下方的 iframe（它是谷歌地图）。我尝试将“pointer-events：auto”赋予 iframe，并将“pointer-events：none”赋予父 div，但它们都不允许点击。

对于信息，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 （向下滚动一点点，您会看到地图）

非常感谢您！

4

1 回答 1

0

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

于 2016-02-24T09:23:34.400 回答