Posible? - Una superposición div que los eventos del mouse ignoran por completo (para que los eventos del mouse afecten solo al div a continuación)

Question

Tengo un mapa de google en un iframe y estoy envuelto en un div. Sobre ese div, tengo otro, que sirve para crear un efecto de sombra empotrado.

El problema es que este div superpuesto tendrá prioridad de los eventos de mouse, por lo que hace que el mapa interactivo de google sea inútil. Debe haber una forma en que pueda hacer que el div superpuesto ignore los eventos del mouse, dejando que el div debajo los obtenga. (por favor, por favor!)

O, ¿hay otra manera de hacerlo?

Este es el código que se emite:

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

Aquí está la CSS relevante:

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

Y aquí es el efecto que estoy tratando de lograr: (el efecto de sombra en la parte superior) div overlay http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg

Answer 1

tal vez ponga #pageShadow dentro del elemento pageMap?

Answer 2

Es posible en Firefox 3.6+, gracias a su apoyo a la propiedad "puntero-eventos", como se explica en este cargo en Mozilla Hacks:

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

Puede haber apoyo en los navegadores WebKit, como se ha mencionado en este cargo en CSS-trucos:

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

Pero no en IE u Opera.

Answer 3

Haz que la divinidad de #pageShadow sea tan grande como la sombra.

Si entiendo correctamente de la imagen simulada, el efecto que intenta lograr es que la sombra solo debe cubrir la parte superior del mapa.

En su código está estirando el div sombra por todo el mapa:

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

Por qué no reducir los valores de manera que cubran únicamente la parte superior:

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

Luego tendrá acceso al puntero al iframe.

Answer 4

he hecho algo similar para mi página entera:

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

y en el html basta con insertar cuatro divs:

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

El truco es que, en mi caso, el div se encuentra fuera del página y la sombra no capta clics.