В этой статье мы подробно расскажем о том, как использовать CSS-свойство pointer-events.
Что такое свойство pointer-events?
CSS ' указатели-события » определяет поведение указателя/касания по отношению к элементу HTML и будет ли выбранный элемент реагировать, выполняя такие действия, как наведение или щелчок.
Как использовать свойство событий указателя?
В CSS свойство pointer-events может использоваться для включения или отключения действий указателя на некоторых определенных элементах HTML. Синтаксис свойства pointer-events приведен ниже.
Синтаксис
указатели-события : никто | авто ;
В упомянутом синтаксисе « авто ” является значением свойства pointer-events по умолчанию, и оно включает действие указателя по отношению к элементу, и “ никто ” полностью противоположно авто; он отключает действие указателя на элементах HTML.
Давайте двигаться дальше и рассмотрим пример, чтобы понять свойство pointer-events.
Пример 1
В нашем HTML-файле укажите тег привязки с текстом « LinuxHint.io ” и поместите его в раздел body.
HTML
< а href знак равно «https://www.linuxhint.io/» > LinuxHint.io < / а >Теперь мы будем использовать « указатели-события ' свойство и присвойте ему значение ' никто ». Это отключит действие указателя на элемент.
CSS
а {указатели-события : никто ;
}
Сохраните HTML-файл с указанным кодом и запустите его в браузере:
Давайте возьмем еще один пример, чтобы подробно рассмотреть свойство pointer-events.
Пример 2
Установите для свойства событий указателя значение « авто ' в это время. Это заставит элемент реагировать на наведение или щелчок указателя. Тем не менее, auto является значением по умолчанию свойства pointer-events.
CSS
а {указатели-события : авто ;
}
Выход
Мы рассмотрели различные варианты использования свойства CSS pointer-events.
Вывод
Чтобы управлять действиями указателя, мы можем использовать CSS « указатели-события ' имущество. “ авто ” value — предопределенное значение этого свойства; он позволяет выполнять действия над элементами HTML. Когда свойство pointer-events используется со значением « никто », он отключает действия по отношению к определенному элементу. В этой статье показано, как использовать свойство CSS pointer-events.