I denne artikel vil vi uddybe, hvordan man bruger egenskaben CSS pointer-events.
Hvad er pointer-events Property?
CSS ' pointer-begivenheder ” egenskab specificerer markør-/trykadfærden mod HTML-elementet, og om det valgte element vil reagere ved at udføre handlinger som f.eks. hover eller klik.
Hvordan bruger man pointer-events Property?
I CSS kan egenskaben pointer-events bruges til at aktivere eller deaktivere markørhandlinger på nogle specifikke HTML-elementer. Syntaksen for pointer-events-egenskaben er angivet nedenfor.
Syntaks
pointer-begivenheder : ingen | auto ;
I den nævnte syntaks, ' auto ' er standardværdien for pointer-events-egenskaben, og den aktiverer markørhandlingen mod et element, og ' ingen ” er totalt modsat auto; det deaktiverer markørhandling på HTML-elementer.
Lad os gå videre og tage et eksempel for at forstå pointer-events-egenskaben.
Eksempel 1
I vores HTML-fil skal du angive et ankertag med teksten ' LinuxHint.io ” og placer den i kropssektionen.
HTML
< -en href = 'https://www.linuxhint.io/' > LinuxHint.io < / -en >Nu vil vi bruge ' pointer-begivenheder ' egenskab og tildel den værdi ' ingen ”. Dette vil deaktivere markørhandlingen på elementet.
CSS
-en {pointer-begivenheder : ingen ;
}
Gem din HTML-fil med nævnte kode og kør den ved hjælp af din browser:
Lad os tage et andet eksempel for at dække pointer-events-egenskaben dybt.
Eksempel 2
Indstil pointer-events egenskabsværdien til ' auto ' denne gang. Det vil få elementet til at reagere over markøren eller klikke. Ikke desto mindre er auto standardværdien for pointer-events-egenskaben.
CSS
-en {pointer-begivenheder : auto ;
}
Produktion
Vi har dækket forskellige anvendelser af CSS pointer-events-egenskaben.
Konklusion
For at styre markørhandlingerne kan vi bruge CSS ' pointer-begivenheder ” ejendom. Det ' auto ” værdi er den foruddefinerede værdi af denne egenskab; det aktiverer handlingerne over HTML-elementerne. Når egenskaben pointer-events bruges med værdien ' ingen ”, deaktiverer det handlingerne mod et bestemt element. Denne opskrivning har vist, hvordan man bruger egenskaben CSS pointer-events.