如何在底层元素上访问该事件？

Question

我有一个div，其中包含一个带有地图的iframe和另一个与地图重叠的div。

HTML

<div class="locationFinder">
    <iframe width="100%" height="100%" frameborder="0" scrolling="no"
            marginheight="0" marginwidth="0"
            src="https://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=37.449105,-122.16048&amp;spn=0.003918,0.009634&amp;z=16&amp;output=embed">
    </iframe>

    <div class="mapover">
        <p class="titleTextM">Want to learn more?</p>
    </div>
</div>

CSS

.locationFinder {
    position: relative;
    width: 100%;
    height: 425px;
    background-repeat: no-repeat;
}
.mapover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 428px;
    background-repeat: no-repeat;
    background: black;
    opacity: .5;
}

第二个div在地图上。所以我不能对它进行任何操作。 所以我的要求是，用户仍然可以使用地图。有什么方法可以实现这个目标吗？

Answer 1

你在mapover css课上试过pointer-events: none;了吗？对于某些版本的ie，这可能需要额外的CSS。