Có thể? - Lớp phủ div bị bỏ qua hoàn toàn bởi các sự kiện chuột (do đó các sự kiện chuột chỉ ảnh hưởng đến div bên dưới)

Question

Tôi có một bản đồ google trong iframe và được bao bọc trong div. Trên đó div, tôi có khác, phục vụ để tạo ra một hiệu ứng bóng lõm.

Vấn đề là div được xếp chồng này sẽ được ưu tiên của bất kỳ sự kiện chuột nào, do đó nó hiển thị bản đồ google tương tác bên dưới vô ích. Phải có cách tôi có thể làm cho các sự kiện chuột bỏ qua phủ chồng div, cho phép div bên dưới nhận được chúng. (xin vui lòng!)

Hoặc, có cách nào khác để làm điều đó không?

đây là các mã đang được đầu ra:

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

Đây là CSS liên quan:

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

Và đây là tác dụng Tôi đang cố gắng để đạt được: (các hiệu ứng đổ bóng trên đầu) div overlay http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg

Answer 1

có thể đặt #pageShadow bên trong phần tử Sơ đồ trang?

Answer 2

Có thể trong Firefox 3.6+ nhờ vào sự ủng hộ của mình đối với "con trỏ-sự kiện" bất động sản, như được giải thích trong bài viết này của Mozilla Hacks:

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

Có thể có hỗ trợ trong các trình duyệt Webkit, như đã đề cập trong bài viết này tại CSS-Tricks:

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

Nhưng không phải trong IE hay Opera.

Answer 3

Làm cho #pageShadow div chỉ lớn bằng bóng.

Nếu tôi hiểu chính xác từ hình ảnh mô phỏng, hiệu ứng bạn đang cố gắng đạt được là bóng sẽ chỉ bao phủ phần trên cùng của bản đồ.

Trong mã của bạn, bạn được trải dài div bóng trên khắp bản đồ:

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

Tại sao không giảm giá trị để họ chỉ bao gồm phần trên:

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

Sau đó, bạn sẽ có quyền truy cập con trỏ vào khung nội tuyến.

Answer 4

tôi đã làm một cái gì đó tương tự cho toàn bộ trang của tôi:

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

và trong html chỉ cần chèn Bốn divs:

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

Bí quyết là rằng, trong trường hợp của tôi, div nằm ngoài trang và bóng không bắt được nhấp chuột nào.