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

#html #css

Есть блок-ссылка, поверх него другой блок. Как сделать чтобы при клике по верхнему
срабатывала нижняя ссылка? 

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

Ответы

Ответ 1

В современных браузерах есть свойство 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.

Если нужна поддержка старых браузеров, то вам придётся вручную форвардить сообщения.
Решения можно найти по ссылке выше.