Möglich? - Ein div-Overlay, das von Mausereignissen komplett ignoriert wird (so dass Mausereignisse nur das div unten beeinflussen)

Question

Ich habe eine Google Map in einem iframe und bin in ein div gehüllt. Über diesem Div habe ich noch einen, der dazu dient, einen zurückgesetzten Schatteneffekt zu erzeugen.

Das Problem ist, dass dieses überlagerte div Priorität von Mausereignissen hat, so dass es die interaktive Google Map unten nutzlos macht. Es muss einen Weg geben, wie ich das überlagerte div dazu bringen kann, Mausereignisse zu ignorieren, indem ich das div darunter lasse. (Bitte, bitte!)

Oder gibt es einen anderen Weg, es zu tun?

hier ist der Code ausgegeben:

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

Hier ist der relevante 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; 
} 

Und hier ist der Effekt, den ich zu erreichen bin versucht: (der Schatteneffekt auf der Oberseite) div overlay http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg

Answer 1

vielleicht den # pageShadow in das pageMap-Element?

Answer 2

Es ist möglich, in Firefox 3.6+ dank seiner Unterstützung für die "Pointer-Ereignisse" Eigenschaft, wie in diesem Beitrag bei Mozilla Hacks erklärt:

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

Es Unterstützung in Webkit-Browser sein kann, wie in diesem Beitrag auf CSS-Tricks erwähnt:

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

aber nicht in IE oder Opera.

Answer 3

Machen Sie das #pageShadow div nur so groß wie den Schatten.

Wenn ich aus dem Mock-Up-Bild richtig verstehe, ist der Effekt, den Sie erreichen möchten, dass der Schatten nur den oberen Teil der Karte abdecken soll.

In Ihrem Code Sie dehnen den Schatten div über die ganze Karte:

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

Warum nicht die Werte verringern, so dass sie nur den oberen Teil abdecken:

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

Dann haben Sie einen Zeigerzugriff auf den Iframe.

Answer 4

habe ich etwas ähnliches für meine ganze Seite:

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

und in den HTML-Code einfach vier divs einfügen:

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

Der Trick besteht darin, dass in meinem Fall die div außerhalb der ist Seite und der Schatten fängt keine Klicks.