W tym artykule omówimy, jak używać właściwości CSS pointer-events.
Co to jest właściwość pointer-events?
CSS” wskaźniki-wydarzenia Właściwość ” określa zachowanie wskaźnika/dotknięcia względem elementu HTML oraz to, czy wybrany element zareaguje, wykonując czynności, takie jak najechanie kursorem lub kliknięcie.
Jak korzystać z właściwości pointer-events?
W CSS właściwość pointer-events może być wykorzystywana do włączania lub wyłączania akcji wskaźnika na niektórych określonych elementach HTML. Składnia właściwości pointer-events jest podana poniżej.
Składnia
wskaźniki-wydarzenia : Żaden | automatyczny ;
We wspomnianej składni „ automatyczny ” jest wartością domyślną właściwości pointer-events i włącza akcję wskaźnika w kierunku elementu, a „ Żaden ” jest całkowitym przeciwieństwem auto; wyłącza akcję wskaźnika na elementach HTML.
Przejdźmy dalej i weźmy przykład, aby zrozumieć właściwość pointer-events.
Przykład 1
W naszym pliku HTML określ tag kotwicy z tekstem „ LinuxHint.io ” i umieść go w części ciała.
HTML
< a href = „https://www.linuxhint.io/” > LinuxHint.io < / a >Teraz użyjemy „ wskaźniki-wydarzenia ” właściwość i przypisz jej wartość ” Żaden ”. Spowoduje to wyłączenie akcji wskaźnika na elemencie.
CSS
a {wskaźniki-wydarzenia : Żaden ;
}
Zapisz plik HTML ze wspomnianym kodem i uruchom go w przeglądarce:
Weźmy inny przykład, aby dokładnie omówić właściwość pointer-events.
Przykład 2
Ustaw wartość właściwości pointer-events na „ automatyczny ' tym razem. Spowoduje to, że element zareaguje po najechaniu kursorem lub kliknięciu. Niemniej jednak auto jest wartością domyślną właściwości pointer-events.
CSS
a {wskaźniki-wydarzenia : automatyczny ;
}
Wyjście
Omówiliśmy różne zastosowania właściwości CSS pointer-events.
Wniosek
Aby kontrolować działania wskaźnika, możemy wykorzystać CSS „ wskaźniki-wydarzenia ' własność. „ automatyczny ” wartość jest predefiniowaną wartością tej właściwości; umożliwia działania na elementach HTML. Gdy właściwość pointer-events jest używana z wartością „ Żaden ”, wyłącza działania w kierunku określonego elementu. Ten artykuł zademonstrował, jak używać właściwości CSS pointer-events.