Обеспечение реагирования элемента на события мыши

В определенных ситуациях возникает необходимость наложения прозрачного элемента div поверх текста, чтобы скрыть его видимость. Однако при этом возникает проблема, связанная с тем, что наложение не позволяет кликнуть по основному тексту. Есть ли способ сделать наложение «невидимым» для событий мыши, позволяя взаимодействовать с текстом ниже?

Например, если у нас есть следующая структура HTML:

    
Some text
    

        ... some content ...
    

Наложение div закрывает текст, но вам нужна возможность щелкнуть по тексту через наложение.

Решение: CSS pointer-events

CSS-указатели позволяют решить эту проблему. Это свойство позволяет вам контролировать, как HTML-элементы реагируют на события мыши. Установив для свойства pointer-events значение none для элемента div наложения, вы можете эффективно сделать его невидимым для щелчков и других событий мыши, но при этом разрешить взаимодействие с элементами под ним.

#overlay {
    pointer-events: none;
}

При применении этого CSS наложенный элемент div станет прозрачным для событий мыши, что позволит пользователям беспрепятственно взаимодействовать с основным текстом.