Ebben az írásban részletesen kitérünk a CSS pointer-events tulajdonság használatára.
Mi az a pointer-events tulajdonság?
CSS ' pointer-események ” tulajdonság határozza meg a mutató/koppintás viselkedését a HTML-elem felé, és azt, hogy a kiválasztott elem reagál-e olyan műveletekkel, mint például az egérmutató vagy a kattintás.
Hogyan használjuk a pointer-events tulajdonságot?
A CSS-ben a pointer-events tulajdonság felhasználható bizonyos HTML-elemeken végzett mutatóműveletek engedélyezésére vagy letiltására. A pointer-events tulajdonság szintaxisa alább látható.
Szintaxis
pointer-események : egyik sem | auto ;
Az említett szintaxisban: „ auto ” a pointer-events tulajdonság alapértelmezett értéke, és lehetővé teszi a mutató műveletet egy elem felé, és „ egyik sem ” teljesen ellentétes az autoval; letiltja a mutatóműveleteket a HTML elemeken.
Menjünk előre, és vegyünk egy példát a pointer-events tulajdonság megértéséhez.
1. példa
A HTML-fájlunkban adjon meg egy horgonycímkét a következő szöveggel: LinuxHint.io ” és helyezze a karosszériarészbe.
HTML
< a href = „https://www.linuxhint.io/” > LinuxHint.io < / a >Most a „ pointer-események 'tulajdonság és adjon hozzá értéket' egyik sem ”. Ezzel letiltja a mutatóműveletet az elemen.
CSS
a {pointer-események : egyik sem ;
}
Mentse el a HTML-fájlt az említett kóddal, és futtassa a böngészővel:
Vegyünk egy másik példát a pointer-events tulajdonság mélyebb lefedésére.
2. példa
Állítsa a pointer-events tulajdonság értékét '' auto ” ezúttal. Ez arra készteti az elemet, hogy reagáljon a mutató egérrel vagy kattintással. Ennek ellenére az auto a pointer-events tulajdonság alapértelmezett értéke.
CSS
a {pointer-események : auto ;
}
Kimenet
Lefedtük a CSS pointer-events tulajdonság különböző felhasználásait.
Következtetés
A mutatóműveletek vezérléséhez használhatjuk a CSS-t. pointer-események ' ingatlan. Az ' auto ” érték ennek a tulajdonságnak az előre meghatározott értéke; lehetővé teszi a HTML elemek feletti műveleteket. Ha a pointer-events tulajdonságot a ' egyik sem ', letiltja az adott elemre irányuló műveleteket. Ez az írás bemutatta, hogyan kell használni a CSS pointer-events tulajdonságát.