A pointer-events tulajdonság segítségével meghatározhatjuk, hogy hogyan viselkedjenek az egyes elemek egér vagy érintés (touch) műveletek alatt .
Pontosabban, meghatározhatjuk, hogy hogyan viselkedjen a kiválasztott elemen bármilyen egér, vagy érintés műveletnél, mint az aktív/hover állapot, a kattintás/érintés esemény. A tulajdonság használatával kizárhatjuk az egyes elemeket az egérrel/érintéssel történő interakció alól. A gyakorlatban erre akkor lehet szükségünk, ha egy a z-index mentén elhelyezett elemen szeretnénk keresztül kattintani úgy, hogy elérjük a mögötte lévő elemet. Ebben az esetben annyit kell tennünk, hogy a kiválasztott elemre beállítjuk a pointer-events: none; értéket!
A tulajdonság 11 értéket vehet fel, azonban ebből 8 csak SVG-re érvényes. A következő három értéket használhatjuk az általános elemeknél:
- none - megszünteti az összes kattintás állapotot és kurzor beállítást
- auto - visszaállítja az alap értéket, hasznos amennyiben egy leszármazotton szeretnénk beállítani az alap értéket
- inherit - örökli a szülő elemnek beállított értéket
a.no-pointer-events {
pointer-events: none;
}Nézzünk egy alap példát! A következőkben egy a teljes elemet elfoglaló hivatkozás található a szöveg felett, ebben az esetben a szöveget nem tudnánk kijelölni, hiszen van egy elem felette a z tengely mentén. Ahhoz, hogy ki tudjuk jelölni a szöveget, nincs más teendőnk, mint az elemet kitakaró elemhez rendelni a pointer-events: none; tulajdonság/érték párt!
See the Pen Pointer Evets Demo 01 by Adam Laki (@adamlaki) on CodePen.
