Свойство CSS pointer-events позволяет нам контролировать взаимодействие элементов с событиями курсора. Это особенно полезно, когда нужно управлять поведением элементов в ответ на клики мыши. Когда pointer-events задано как none, элемент фактически становится прозрачным для событий мыши. Клики как бы "пронизывают" его, попадая на другие элементы, расположенные за ним или под ним на веб-странице. Один из классических сценариев, где это свойство может оказаться крайне полезным, связан с интерфейсами типа бургер-меню. Допустим, у нас есть структура меню с бургер-иконкой, в которой используются вложенные span элементы для создания анимации. Если мы назначаем обработчик клика на всю иконку бургера для открытия меню, то может проявиться неожиданное поведение: меню откроется, но анимация иконки не срабатывает как предполагалось. <div class="wrapper"> <div class="burger"> <span></span> <span></span> <span></span> </div> <nav class="menu"> <ul class="menulist"> <li class="menulist-item"> <a class="menulist-link" href="">Главная</a> </li> <li class="menulist-item"> <a class="menulist-link" href="">О нас</a> </li> <li class="menulist-item"> <a class="menulist-link" href="">Преимущества</a> </li> <li class="menulist-item"> <a class="menu__list-link" href="">Контакты</a> </li> </ul> </nav> </div> Такое поведение может быть связано с тем, что клик фактически попадает не на сам бургер, а на один из вложенных span. И чтобы обеспечить корректную анимацию бургера, мы можем применить pointer-events: none; ко всем span внутри бургера. Это гарантирует, что все события мыши будут улавливаться именно самим бургером, обеспечивая точность и надежность при открытии меню. .burger span { pointer-events: none; } ⚡️ Навыкиверстальщика | CSS