В тази статия ще разработим как да използваме свойството CSS pointer-events.
Какво е свойство на указателни събития?
CSS “ показалец-събития ” Свойството определя поведението на показалеца/докосването към HTML елемента и дали избраният елемент ще реагира чрез извършване на действия като задържане или щракване.
Как да използвам свойство pointer-events?
В CSS свойството pointer-events може да се използва за активиране или деактивиране на действия с показалец върху някои конкретни HTML елементи. Синтаксисът на свойството pointer-events е даден по-долу.
Синтаксис
показалец-събития : нито един | Автоматичен ;
В споменатия синтаксис „ Автоматичен ” е стойността по подразбиране на свойството pointer-events и позволява действието на показалеца към елемент, и „ нито един ” е напълно противоположен на auto; той забранява действието на показалеца върху HTML елементи.
Нека да продължим напред и да вземем пример, за да разберем свойството pointer-events.
Пример 1
В нашия HTML файл посочете anchor таг с текста „ LinuxHint.io ” и го поставете в частта на тялото.
HTML
< а href = „https://www.linuxhint.io/“ > LinuxHint.io < / а >Сега ще използваме „ показалец-събития „свойство и му присвоете стойност“ нито един ”. Това ще деактивира действието на показалеца върху елемента.
CSS
а {показалец-събития : нито един ;
}
Запазете вашия HTML файл със споменатия код и го стартирайте с вашия браузър:
Нека вземем още един пример, за да покрием подробно свойството pointer-events.
Пример 2
Задайте стойността на свойството pointer-events на „ Автоматичен ' този път. Това ще накара елемента да реагира при задържане на показалеца или щракване. Независимо от това, auto е стойността по подразбиране на свойството pointer-events.
CSS
а {показалец-събития : Автоматичен ;
}
Изход
Разгледахме различни употреби на свойството CSS pointer-events.
Заключение
За да контролираме действията на показалеца, можем да използваме CSS ' показалец-събития ' Имот. „ Автоматичен ” стойност е предварително дефинираната стойност на това свойство; позволява действията над HTML елементите. Когато свойството pointer-events се използва със стойността „ нито един ”, забранява действията към определен елемент. Това описание демонстрира как да използвате свойството CSS pointer-events.