Страницы

Поиск по вопросам

понедельник, 13 мая 2019 г.

Как сделать блок прозрачным для ссылок?

Есть блок-ссылка, поверх него другой блок. Как сделать чтобы при клике по верхнему срабатывала нижняя ссылка?
Вроде какое-то CSS свойство есть... Прошу НЕ ПИШИТЕ про opacity и z-index! Мне нужно чтобы внешне ничего не изменилось, а верхний блок сделался как-бы прозрачным для ссылки снизу.


Ответ

В современных браузерах есть свойство CSS pointer-events. Если задать ему значение none, то элемент становистя "прозрачным" для событий мыши. IE на данный момент это свойство не поддерживает, но вы можете воспользоваться хаком с filter
Для современных браузеров:
pointer-events: none; background: url('your_transparent.png');
Для IE11:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); background: none !important;
В старых браузерах, в том числе в IE10- это не работает. Если эта функциональность критична для использования сайта, то пока лучше её избегать.
См. Click through a DIV to underlying elements
Если нужна поддержка старых браузеров, то вам придётся вручную форвардить сообщения. Решения можно найти по ссылке выше.

Комментариев нет:

Отправить комментарий