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

Я сделал, чтобы Google отобразился в iframe и перенесенный в отделение. Выше того отделения у меня есть другой, который служит для создания расположенного эффекта тени.

Проблема состоит в том, что это overlayed отделение возьмет приоритет любых событий от нажатия мыши, таким образом, оно представит интерактивную карту Google ниже бесполезного. Должен быть способ, которым я могу заставить overlayed отделение проигнорировать события от нажатия мыши, позволение отделению ниже получает их. (!)

Или, есть ли другой способ сделать это?

вот производимый код:

Text about the company

Job 1

Description

Job 2

Description

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

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

8
задан RGBK 10 August 2010 в 18:57
поделиться

3 ответа

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

0
ответ дан 6 December 2019 в 00:53
поделиться

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

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

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

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

Но не в IE или Opera.

3
ответ дан 6 December 2019 в 00:53
поделиться

Сделайте div #pageShadow размером с тень.

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

В коде вы растягиваете div тени по всей карте:

#pageShadow {.. min-height: 462px; минимальная ширина: 1096 пикселей; }

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

#pageShadow {.. height: 20px; минимальная ширина: 1096 пикселей; }

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

0
ответ дан 6 December 2019 в 00:53
поделиться