Сделать перекрывающий div "не кликабельным", чтобы доступ к содержимому ниже можно было получить?

Я использую наложение JPG с уменьшенной непрозрачностью для эффекта, однако я хочу, чтобы это было только как эффект, и сделало контент ниже этого div clickable. Возможно ли это, спасибо:)))

Спасибо за ваши комментарии. Думаю, мне придется подумать о чем-то другом, потому что JPEG охватывает всю страницу:)

Ответы

Ответ 2

Нет, нет. Элемент overlaying всегда будет перехватывать клик. Один из возможных способов обхода - связать событие click с элементом наложения, а затем получить текущую позицию мыши и сравнить ее с положением элемента под ним, чтобы определить, должен ли этот элемент регистрировать клик. Но есть вероятность, что есть намного лучший способ сделать это. Однако, не видя своего кода, я не знаю.

Ответ 3

Да, его возможный

Используйте pointer-events: none вместе с условными операциями CSS для IE11 (поскольку он не работает в IE10 или ниже), вы можете получить решение, совместимое с браузером, для достижения этого.

Используя AlphaImageLoader, вы можете даже поставить прозрачный .PNG/.GIF в оверлей div и кликнуть на элементы ниже.

CSS

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

IE11 условно:

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

Вот базовая страница примера со всем кодом.

Ответ 4

один простой трюк, который я нашел, althoug не очень w3c, заключается в том, чтобы инкапсулировать div в span и использовать этот класс span для создания наложения. Таким образом, все будет доступно для кликов, а div будет вести себя как div