Hvordan bruke CSS Pointer-Events-egenskap

Mens du utvikler et nettsted, kan det være lurt å begrense seerne fra å utføre noen handlinger (klikk/sveve) på noen elementer på nettstedet, for eksempel bilder eller hyperkoblinger. Det kan være flere grunner; For eksempel vil du ikke at brukeren skal klikke på lenken fordi den er for å forbedre nettstedets interne koblingsstruktur eller for å beskytte det som er inne i lenken. I slike scenarier kan CSS Pointer-Events-egenskapen brukes til å få de nødvendige resultatene.

I denne oppskrivningen vil vi utdype hvordan du bruker CSS Pointer-Events-eiendommen.

Hva er pekerhendelser eiendommer?

CSS “peker-hendelser”Eiendom spesifiserer pekeren/trykkatferden mot HTML -elementet og om det valgte elementet vil svare ved å utføre handlinger som sveve eller klikk.

Hvordan du bruker pekerhendelser eiendommer?

I CSS kan pekerhendelsesegenskapen brukes til å aktivere eller deaktivere pekerhandlinger på noen spesifikke HTML-elementer. Syntaksen til egenskapen Peker-Events er gitt nedenfor.

Syntaks

Pointer-Events: Ingen | bil;

I den nevnte syntaks, “bil”Er standardverdien til pekerhendelsesegenskapen, og den muliggjør pekerhandling mot et element, og“ingen”Er helt motsatt av bilen; Det deaktiverer pekerhandling på HTML -elementer.

La oss gå videre og ta et eksempel for å forstå pekerhendelsesegenskapen.

Eksempel 1
I HTML -filen vår, spesifiser en ankerkode med teksten "Linuxhint.io”Og plasser den i kroppsdelen.

Html

Linuxhint.io

Nå vil vi bruke “peker-hendelser”Eiendom og tilordne den verdien”ingen”. Dette vil deaktivere pekeren handling på elementet.

CSS

en
Peker-hendelser: Ingen;

Lagre HTML -filen din med nevnt kode og kjør den ved hjelp av nettleseren:

La oss ta et annet eksempel for å dekke pekerhendelsene dypt.

Eksempel 2
Angi peker-hendelsesegenskapsverdien til “bil" denne gangen. Det vil få elementet til å svare over pekeren svev eller klikk. Likevel er auto standardverdien til eiendommen.

CSS

en
Peker-hendelser: Auto;

Produksjon

Vi har dekket forskjellige bruksområder av CSS Pointer-Events-eiendommen.

Konklusjon

For å kontrollere pekerhandlingene, kan vi bruke CSS “peker-hendelser”Eiendom. “bil”Verdien er den forhåndsdefinerte verdien av denne egenskapen; Det muliggjør handlingene over HTML -elementene. Når egenskapen Peker-Events brukes med verdien “ingen”, Det deaktiverer handlingene mot et spesifikt element. Denne oppskrivningen har vist hvordan du bruker CSS Pointer-Events-eiendommen.