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.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)
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&source=s_q&hl=en&geocode=&q=Baked+Beans+B.V.+i.o.,+Amsterdam,+Nederland&sll=52.365721,4.891641&sspn=0.008648,0.022724&ie=UTF8&hq=baked+beans+bv+io&hnear=Amsterdam,+North+Holland,+The+Netherlands&ll=52.363837,4.891109&spn=0.01664,0.045447&z=14&iwloc=near&cid=2617758725349562441&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
interesante, voy a echarle un vistazo a eso. Pero supongo que es discutible si, por ejemplo, y la ópera no lo admite.Supongo que puedo hacer el div invisible en ie y en la opera – RGBK
Después de leer mi comentario nuevamente, debería haber dejado en claro que el soporte para esta propiedad vendrá en el futuro, afortunadamente, pero ahora no es ampliamente soportado. –