संभव है? - एक div ओवरले जिसे माउस इवेंट्स द्वारा पूरी तरह से अनदेखा किया जाता है (ताकि माउस इवेंट्स केवल नीचे div को प्रभावित कर सकें)

Question

मेरे पास एक आईफ्रेम में एक Google मानचित्र है और एक div में लपेटा गया है। उस div के ऊपर, मेरे पास दूसरा है, जो एक अवकाश छाया प्रभाव बनाने के लिए कार्य करता है।

समस्या यह है कि यह ओवरलेड div किसी भी माउस ईवेंट की प्राथमिकता लेगा, इसलिए यह बेकार नीचे इंटरैक्टिव Google मानचित्र प्रस्तुत करता है। एक तरीका होना चाहिए जिससे मैं ओवरलेड डिव माउस घटनाओं को अनदेखा कर सकूं, जिससे नीचे दिए गए div को प्राप्त किया जा सके। (कृपया, कृपया!)

या, क्या ऐसा करने का कोई और तरीका है?

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

यहाँ प्रासंगिक सीएसएस है::

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

और यहाँ प्रभाव मैं प्राप्त करने के लिए कोशिश कर रहा हूँ है:

यहाँ कोड जा रहा है उत्पादन है (ऊपर छाया प्रभाव) div overlay http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg

Answer 1

शायद पेजमैप तत्व के अंदर #pageShadow डालें?

Answer 2

यह "सूचक-ईवेंट" संपत्ति के लिए अपने समर्थन के लिए धन्यवाद 3.6+ फ़ायरफ़ॉक्स में संभव है, मोज़िला हैक्स पर इस पोस्ट में बताई गई विधि:

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

वेबकिट ब्राउज़रों में समर्थन नहीं किया जा सकता है, सीएसएस-ट्रिक्स पर इस पोस्ट में उल्लेख किया है:

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

लेकिन IE या ओपेरा में नहीं।

Answer 3

#pageShadow div को केवल छाया के रूप में बड़ा बनाएं।

यदि मैं नकली छवि से सही ढंग से समझता हूं, तो आप जिस प्रभाव को प्राप्त करने का प्रयास कर रहे हैं वह यह है कि छाया केवल मानचित्र के शीर्ष भाग को कवर करनी चाहिए।

अपने कोड में आप सभी नक्शे पर छाया div खींच रहे हैं:

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

मूल्यों क्यों कमी नहीं इतना है कि वे केवल शीर्ष हिस्से को कवर:

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

फिर आपके पास आईफ्रेम पर पॉइंटर पहुंच होगी।

Answer 4

मैं अपने पूरे पृष्ठ के लिए कुछ इसी तरह किया:

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

और html में बस चार divs सम्मिलित करें:

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

चाल है कि, मेरे मामले में, div के बाहर है पेज और छाया कोई क्लिक नहीं पकड़ता है।