Возможный?- Наложение div, которое полностью игнорируется событиями мыши (чтобы события мыши влияли только на div ниже)

Question

У меня есть карта Google в iframe и завернутый в div. Над этим div у меня есть еще один, который служит для создания утопленного эффекта тени.

Проблема в том, что этот оверлейный div будет иметь приоритет перед любыми событиями мыши, поэтому интерактивная карта Google ниже будет бесполезной. Должен быть способ, которым я могу заставить наложенный div игнорировать события мыши, позволяя 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>

Вот соответствующий 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;  
}

И вот эффект, который я пытаюсь достичь: (эффект тени сверху) div overlay http://baked -beans.tv / bb / wp-content / uploads / site-dev / google-map-inner-shadow-div-overlay.jpg

Answer 1

Это возможно в Firefox 3.6+ благодаря поддержке свойства указателя-событий, как объясняется в этом посте в Mozilla Hacks:

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

Может быть поддержка в браузерах Webkit, как упомянуто в этом посте на CSS-Tricks:

http://css -tricks.com / указатель события ток-нав /

Но не в IE или Opera.

Answer 2

Я сделал что-то похожее для всей моей страницы:

        .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 просто вставил четыре div:

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

Хитрость в том, что в моем случае divнаходится за пределами страницы, и тень не ловит щелчки.

Answer 3

Делайте div #pageShadow только таким большим, как тень.

Если я правильно понимаю из макета изображения, эффект, которого вы пытаетесь достичь, заключается в том, что тень должна покрывать только верхнюю часть карты.

В своем коде вы растягиваете тень на всю карту:

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

Почему бы не уменьшить значения, чтобы они охватывали только верхнюю часть:

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

Тогда у вас будет доступ к указателю в iframe.

Answer 4

возможно поместить #pageShadow внутри элемента pageMap?