Possible? — A div overlay which is completely ignored by mouse events (so that mouse events effect only the div below)

Question

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.

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;amp;source=s_q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=Baked+Beans+B.V.+i.o.,+Amsterdam,+Nederland&amp;amp;sll=52.365721,4.891641&amp;amp;sspn=0.008648,0.022724&amp;amp;ie=UTF8&amp;amp;hq=baked+beans+bv+io&amp;amp;hnear=Amsterdam,+North+Holland,+The+Netherlands&amp;amp;ll=52.363837,4.891109&amp;amp;spn=0.01664,0.045447&amp;amp;z=14&amp;amp;iwloc=near&amp;amp;cid=2617758725349562441&amp;amp;output=embed"&gt;&lt;/iframe&gt;&lt;/p&gt;
</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>

Here's the relevant 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)

Answer 1

perhaps put the #pageShadow inside the pageMap element?

Answer 2

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/

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

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

But not in IE or Opera.

Answer 3

Make the #pageShadow div only as big as the shadow.

If I understand correctly from the mock up image, the effect you are trying to achieve is that the shadow should only cover the top part of the map.

In your code you are stretching the shadow div all over the map:

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

Why not decrease the values so that they cover only the top part:

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

Then you will have pointer access to the iframe.