Как сделать элемент над контентом, но чтобы не перехватывал события клика

153

23 ноября 2018, 13:50

Необходимо на всю страницу поставить эффект волны (такой как на Материалайзе).

Суть эффект: при клике на странице появляется кружочек, какой увеличивается и плавной исчезает через время.

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

Варианты решения:
1. Не использовать эту анимацию или частично ограничить область использования;
2. С помощью какого-то способа сделать ее без "плоти", не кликабельной и соответственно, чтобы не перехватывала событие;
3. Ускорить анимацию.

Однако я надеюсь, что есть решение второго варианта.

Answer 1

чтобы мышь не реагировала на элемент для визуальных эффектов в css этого элемента можно прописать pointer-events: none;