I denne artikkelen vil vi utdype hvordan du bruker egenskapen CSS pointer-events.
Hva er pointer-events Property?
CSS ' peker-hendelser ”-egenskapen spesifiserer peker-/trykkadferden mot HTML-elementet og om det valgte elementet vil svare ved å utføre handlinger som å holde musepekeren eller klikke.
Hvordan bruke pointer-events Property?
I CSS kan egenskapen pointer-events brukes til å aktivere eller deaktivere pekerhandlinger på enkelte HTML-elementer. Syntaksen til egenskapen pointer-events er gitt nedenfor.
Syntaks
peker-hendelser : ingen | auto ;
I den nevnte syntaksen, ' auto ' er standardverdien til egenskapen pointer-events, og den aktiverer pekerhandlingen mot et element, og ' ingen ” er totalt motsatt av auto; det deaktiverer pekerhandling på HTML-elementer.
La oss gå videre og ta et eksempel for å forstå egenskapen for pointer-events.
Eksempel 1
I HTML-filen vår, spesifiser en ankertag med teksten ' LinuxHint.io ” og plasser den innenfor kroppsdelen.
HTML
< en href = 'https://www.linuxhint.io/' > LinuxHint.io < / en >Nå vil vi bruke ' peker-hendelser ' egenskap og tilordne den verdi ' ingen '. Dette vil deaktivere pekerhandlingen på elementet.
CSS
en {peker-hendelser : ingen ;
}
Lagre HTML-filen med nevnte kode og kjør den med nettleseren din:
La oss ta et annet eksempel for å dekke egenskapen for pekerhendelser dypt.
Eksempel 2
Sett verdien for pointer-events-egenskapen til ' auto ' denne gangen. Det vil få elementet til å svare over pekeren eller klikke. Ikke desto mindre er auto standardverdien for pointer-events-egenskapen.
CSS
en {peker-hendelser : auto ;
}
Produksjon
Vi har dekket ulike bruksområder for CSS pointer-events-egenskapen.
Konklusjon
For å kontrollere pekerhandlingene kan vi bruke CSS ' peker-hendelser ' eiendom. « auto ” verdi er den forhåndsdefinerte verdien til denne egenskapen; den aktiverer handlingene over HTML-elementene. Når egenskapen pointer-events brukes med verdien ' ingen ”, deaktiverer det handlingene mot et spesifikt element. Denne oppskriften har vist hvordan du bruker egenskapen CSS pointer-events.