Создание базовых элементов HTML, доступных для клика, используя CSS-свойство pointer-events. Когда мы помещаем элемент HTML над другим элементом, то базовый элемент становится не кликабельным. Мы можем сделать элемент top верхним для обхода событий мыши, это клик, наведение и так далее. И все это на базовом элементе, где задействовано свойство CSS pointer-events.
По умолчанию значение указателя-события является автоматическим для всех элементов, поэтому верхний элемент блокирует события мыши для базовых элементов. Делая события-указатели равными «none», мы можем заставить верхние элементы передавать события мыши нижележащим элементам.
HTML
Код
<div class="box1" onclick="alert('box1 clicked');">
<div class="box2"></div>
</div>
CSS
Код
.box1
{
height: 100px;
width: 100px;
background-color: yellow;
}
.box2
{
height: 100px;
width: 100px;
background-color: green;
pointer-events: none;
}
Свойство pointer-events позволяет управлять над тем, как HTML элементы реагируют на мышь или сенсорные события, в том числе активное состояний.
Демонстрация
