可能？ - 一个完全被鼠标事件忽略的div叠加层（这样鼠标事件只会影响下面的div） [英] Possible? — A div overlay which is completely ignored by mouse events (so that mouse events effect only the div below)

问题描述

我在iframe中有一张google地图，并且包含在div中。在上面那个div，我有另一个，这有助于创建一个隐藏的阴影效果。

I have a google map in an iframe and wrapped in a div. Above that div, i have another, which serves to create a recessed shadow effect.

问题是，这个重叠的div将优先于任何鼠标事件，因此它使得交互式google地图无用。必须有一种方法，我可以使覆盖的div忽略鼠标事件，让下面的div得到它们。 （请，请！）

The problem is that this overlayed div will take priority of any mouse events, so it renders the interactive google map below useless. There must be a way I can make the overlayed div ignore mouse events, letting the div below get them. (please, please!)

还是有另一种方法吗？

Or, is there another way to do it?

这里是正在输出的代码：

here's the code being output:

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

这里是我想达到的效果：顶部）

And here's the effect I'm trying to attain: (the shadow effect on the top)

推荐答案

这是可能的Firefox 3.6+感谢其支持指针事件如Mozilla Hacks上的此帖中所述：

It is possible in Firefox 3.6+ thanks to its support for the "pointer-events" property, as explained in this post at Mozilla Hacks:

http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/

在这篇文章中提到的Webkit浏览器可能支持CSS-Tricks：

There may be support in Webkit browsers, as mentioned in this post at CSS-Tricks:

a href =http://css-tricks.com/pointer-events-current-nav/ =nofollow noreferrer> http://css-tricks.com/pointer-events-current-nav/ a>

http://css-tricks.com/pointer-events-current-nav/

但不是在IE或Opera。

But not in IE or Opera.

这篇关于可能？ - 一个完全被鼠标事件忽略的div叠加层（这样鼠标事件只会影响下面的div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！