Cum să utilizați proprietatea CSS pointer-events

Cum Sa Utilizati Proprietatea Css Pointer Events



În timpul dezvoltării unui site web, este posibil să doriți să restricționați spectatorii să efectueze anumite acțiuni (clic/hover) asupra unor elemente ale site-ului web, cum ar fi imagini sau hyperlinkuri. Ar putea exista mai multe motive; de exemplu, nu doriți ca utilizatorul să facă clic pe link, deoarece este pentru a îmbunătăți structura internă de legături a site-ului web sau pentru a proteja ceea ce se află în interiorul linkului. În astfel de scenarii, proprietatea CSS pointer-events poate fi utilizată pentru a obține rezultatele necesare.

În acest articol, vom detalia cum să folosim proprietatea CSS pointer-events.

Ce este proprietatea pointer-events?

CSS „ pointer-evenimente ”proprietatea specifică comportamentul indicatorului/atingerea față de elementul HTML și dacă elementul selectat va răspunde prin efectuarea de acțiuni precum trecerea cu mouse-ul sau clic.







Cum se utilizează proprietatea pointer-events?

În CSS, proprietatea pointer-events poate fi utilizată pentru a activa sau dezactiva acțiunile pointerului asupra anumitor elemente HTML specifice. Sintaxa proprietății pointer-events este dată mai jos.



Sintaxă



pointer-evenimente : nici unul | auto ;

În sintaxa menționată, „ auto „ este valoarea implicită a proprietății pointer-events și activează acțiunea pointerului către un element și „ nici unul ” este total opus auto; dezactivează acțiunea indicatorului asupra elementelor HTML.





Să mergem mai departe și să luăm un exemplu pentru a înțelege proprietatea pointer-events.

Exemplul 1
În fișierul nostru HTML, specificați o etichetă de ancorare cu textul „ LinuxHint.io ” și plasați-l în secțiunea corpului.



HTML

< A href = „https://www.linuxhint.io/” > LinuxHint.io < / A >

Acum, vom folosi „ pointer-evenimente „proprietatea și atribuiți-i valoarea „ nici unul ”. Aceasta va dezactiva acțiunea indicatorului asupra elementului.

CSS

A {
pointer-evenimente : nici unul ;
}

Salvați fișierul HTML cu codul menționat și rulați-l folosind browser-ul dvs.:

Să luăm un alt exemplu pentru a acoperi în profunzime proprietatea pointer-events.

Exemplul 2
Setați valoarea proprietății pointer-events la „ auto ' de data asta. Acesta va face ca elementul să răspundă peste cursorul sau clic. Cu toate acestea, auto este valoarea implicită a proprietății pointer-events.

CSS

A {
pointer-evenimente : auto ;
}

Ieșire

Am acoperit diferite utilizări ale proprietății CSS pointer-events.

Concluzie

Pentru a controla acțiunile pointerului, putem folosi CSS „ pointer-evenimente ” proprietate. „ auto ” value este valoarea predefinită a acestei proprietăți; permite acțiunile peste elementele HTML. Când proprietatea pointer-events este folosită cu valoarea „ nici unul ”, dezactivează acțiunile față de un anumit element. Acest articol a demonstrat cum se utilizează proprietatea CSS pointer-events.