Я использую наложение JPG с уменьшенной непрозрачностью для эффекта, однако я хочу, чтобы это было только как эффект, и сделало контент ниже этого div clickable. Возможно ли это, спасибо:)))
Спасибо за ваши комментарии. Думаю, мне придется подумать о чем-то другом, потому что JPEG охватывает всю страницу:)
Ну есть pointer-events:none;, но только несколько браузеров современных браузеров (и IE11) поддерживают его.
Нет, нет. Элемент overlaying всегда будет перехватывать клик. Один из возможных способов обхода - связать событие click с элементом наложения, а затем получить текущую позицию мыши и сравнить ее с положением элемента под ним, чтобы определить, должен ли этот элемент регистрировать клик. Но есть вероятность, что есть намного лучший способ сделать это. Однако, не видя своего кода, я не знаю.
Да, его возможный
Используйте 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;
Вот базовая страница примера со всем кодом.
один простой трюк, который я нашел, althoug не очень w3c, заключается в том, чтобы инкапсулировать div в span и использовать этот класс span для создания наложения. Таким образом, все будет доступно для кликов, а div будет вести себя как div