Possible? - une superposition de div complètement ignorée par les événements de la souris (afin que les événements de la souris n'effacent que le DIV ci-dessous)

J'ai une carte Google dans un iframe et enveloppé dans un div. Au-dessus de cette div, j'en ai un autre, qui sert à créer un effet d'ombre encastré.

Le problème est que cette DIV superposée prendra la priorité des événements de la souris, de sorte qu'il rend la carte Google interactive ci-dessous inutile. Il doit y avoir une manière que je puisse rendre les événements de la souris de la souris superposés, laissant les div des Div les obtenir. (s'il vous plaît, s'il vous plaît!) p>

ou, y a-t-il une autre façon de le faire? p>

Voici le code SORTIE: P>

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