Можно ли пропускать щелчки мыши через элемент наложения:
<div style="background: url('img/rain.png'); z-index: 100; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;"></div>
вплоть до подстилающих элементов (абзацы, изображения, ссылки и т.д.)?
Или сформулировано иначе:
Есть ли способ создать чисто эстетический слой/слой в HTML, CSS и/или JavaScript?
Вы можете попытаться получить координаты мыши в событии клика, а затем извлечь элемент, спрятав свой оверлей, использовать document.elementFromPoint(x, y), а затем повторно отобразить оверлей.
См. этот вопрос SO для получения дополнительной информации о elementFromPoint:
Как найти DOM node, который находится в заданной (X, Y) позиции? (Хит-тест)
Это можно решить с помощью CSS:
div { pointer-events:none; }
Поддерживается IE 11+, Chrome, Firefox, Safari и Opera.
Подробнее: https://developer.mozilla.org/en-US/docs/CSS/pointer-events
Я вижу, что вы используете "rain.24.png" - оверлейный анимированный? Как вы перемещаете изображения для имитации дождя? Если это так, то лучше всего остановить/скрыть анимированные на mousedown, а затем активировать вашу функцию на базовых элементах с помощью мыши.
Если это не так, используйте ответ Vincent для получения элемента, затем вызовите связанную функцию или используйте trigger для имитации щелчка
Вы можете назначить событие щелчка мыши на обложку div, затем выполнить итерацию по всем элементам, которые, как вы знаете, могут быть внизу, проверяя их положение, ширину и высоту, чтобы увидеть, находится ли это местоположение щелчка мыши в пределах их границ, и если это так, вызовите их событие onclick.
Чтобы сделать подмножество возможных элементов меньше, вы можете дать интерактивные элементы, которые могут быть под div, специальным классом.