可以吗？——一个 div 叠加层，完全忽略鼠标事件（使鼠标事件仅影响下方的 div）。

Question

我有一个嵌套在div中的google地图iframe。在这个div上面，我还有另一个div，用于创建凹陷阴影效果。

问题是这个覆盖的div会优先于任何鼠标事件，因此它使得下面的交互式Google地图无法使用。我必须找到一种方法让覆盖的div忽略鼠标事件，从而让下面的div获取鼠标事件。(拜托了！)

或者，还有其他方法可以实现吗？

以下是输出的代码:

<div id="pageWrapper" style="display: block; ">
    <div class="page_content">
        <div id="pageShadow"></div>
        <div id="pageMap"><p><iframe width="1096" height="462" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Baked+Beans+B.V.+i.o.,+Amsterdam,+Nederland&amp;sll=52.365721,4.891641&amp;sspn=0.008648,0.022724&amp;ie=UTF8&amp;hq=baked+beans+bv+io&amp;hnear=Amsterdam,+North+Holland,+The+Netherlands&amp;ll=52.363837,4.891109&amp;spn=0.01664,0.045447&amp;z=14&amp;iwloc=near&amp;cid=2617758725349562441&amp;output=embed"></iframe></p>
</div>
    </div>

    <div id="page_description">
        <p>Text about the company</p>
    </div>

    <div id="page_credits">

        <div class="recTitle">Job 1</div>
        <div class="recJob"><p>Description</p>
</div>

        <div class="recTitle">Job 2</div>
        <div class="recJob"><p>Description</p>
</div>

        <div class="recTitle"></div>
        <div class="recJob"></div>

    </div>

</div>

以下是相关的CSS：

#pageWrapper {
position: relative;
}

.page_content {
max-height: 462px;
position: relative;
}

#pageShadow {
position: absolute;
top:0;
left: 0;
-moz-opacity: .5;
opacity:.5;
filter: alpha(opacity=50);  
background-color: aqua;
z-index: 300;
min-height:462px;
min-width: 1096px;
}

#pageMap {
position: absolute;
top:0;
left: 0;
z-index: 299;
min-height:462px;
min-width: 1096px;
}

.recTitle {
color: #333;
font-size: 21px;
font-family: 'ProximaNovaLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 3px;
padding-bottom: 16px;
}

.recTitle:first-child {
padding-top: 10px;
}

.recJob {
padding-left: 3px;
padding-bottom: 30px;
}

#page_description {
position: absolute;
top:462px;
font-family: 'ProximaNovaLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
float:left;
width:792px;
padding: 15px;
padding-top:20px;
line-height: 22px;
font-weight: normal;
min-height: 345px;
background-color: white;
}

#page_credits {
position: absolute;
top:462px;  
left:822px;
padding: 15px 10px 15px 10px;
float:right;
width:254px;
background-color: #f5f5f5;
min-height: 350px;  
}

我想要实现的效果是：（顶部的阴影效果） div覆盖 http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg

- RGBK

Answer 1

感谢Firefox 3.6+对于"pointer-events"属性的支持, 这使得它可以实现。请参阅Mozilla Hacks中的此帖子了解详细信息：http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/。

据CSS-Tricks网站提到，Webkit浏览器可能也有相关支持：http://css-tricks.com/pointer-events-current-nav/，但是IE或Opera浏览器不支持此属性。

- David Lantner

---

有趣，我会仔细研究一下。但是如果IE和Opera不支持它，那就无意义了。我想我可以在IE和Opera上将div设置为不可见。 - RGBK

再次阅读我的评论后，我应该明确表示，对于此属性的支持将来会到来，但目前还没有得到广泛支持。 - David Lantner

Answer 2

我为整个页面做了类似的事情：

        .shadowframe_top{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            width: 100%;
            position: fixed;
            top: -10px;
            height: 10px;
        }
        .shadowframe_left{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            height: 100%;
            position: fixed;
            left: -10px;
            width: 10px;
        }
        .shadowframe_bottom{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            width: 100%;
            position: fixed;
            bottom: -10px;
            height: 10px;
        }
        .shadowframe_right{
            margin: 0;
            padding: 0;
            box-shadow: 0px 5px 18px #333;
            -webkit-box-shadow:  0px 5px 18px #333;
            background-color:#F0F0F0;
            height: 100%;
            position: fixed;
            right: -10px;
            width: 10px;
        }

在 HTML 中只需插入四个 div：

    <div class="shadowframe_top"> </div>
    <div class="shadowframe_left"> </div>
    <div class="shadowframe_bottom"> </div>
    <div class="shadowframe_right"> </div>

“诀窍在于，对我来说，div 在页面之外，阴影无法捕捉到点击。”

- Szin

Answer 3

或许把 #pageShadow 放在 pageMap 元素里面？

- dockeryZ

Answer 4

将 #pageShadow div 只设置为阴影大小。

如果我从模拟图像中正确理解，您想要实现的效果是阴影只覆盖地图的顶部部分。

在您的代码中，您将阴影 div 拉伸到整个地图上：

#pageShadow { .. min-height: 462px; min-width: 1096px; }

为什么不减小值，使其仅覆盖顶部部分：

#pageShadow { .. height: 20px; min-width: 1096px; }

然后您将可以访问 iframe。

- hitautodestruct

---

问题是地图的控件在那里...所以即使div更短，它仍然会遮挡“地图”、“卫星”等。 :-/ - RGBK

如何在控件下方重新定位div？使用position:relative。 - hitautodestruct