DIV с прозрачной картинкой не позволяет кликнуть по дочерним элементам, закрывая их

CSS, HTML, Вопросы и ответы
28 февраля 2012

Вопрос

У меня на HTML-странице есть DIV с прозрачной фоновой картинкой, который позиционирован абсолютно, и он закрывает собою много всяких элементов, в том числе ссылок, кнопок и т.п.

Если я кликаю за пределами этого DIV, всё работает нормально. Но я никак не могу кликнуть по элементах, которые расположены за этим DIV. Получается, что он как бы замещает, или точнее сказать закрывает собою всё, что под ним (хотя он прозрачный и элементы видны).

Я хочу, чтобы появилась возможность кликать по них при любых обстоятельствах. Возможно ли сделать это, желательно кроссбраузерно?


Ответ №1

Да, возможно. Если использовать свойство pointer-events:none вместе с условным выражением для IE, можно добиться кроссбраузерного решения этой проблемы.

pointer-events:none;
background:url('your_transparent.png');

Следующий CSS надо назначить IE посредством условных комментариев.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;

Кликните по кнопке, чтобы применить свойство pointer-events:none к закрывающему ДИВу в примере выше, и тем самым сделать ссылки под ним кликабельными в большинстве браузеров.

З.Ы. Наверное, решение нельзя считать годным - как оказалось, pointer-events:none не поддерживается Оперой :(

3 комментария

Добавить комментарий


(обязательно)