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

Вопрос

У меня на 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 не поддерживается Оперой :(

No responses yet

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