Invalid RSS feed!

CSS pointer-events tulajdonság

-

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 .

CSS pinter-events

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-ponter-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 kitudjuk 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!

.wrapper {
  width: 400px;
  background: #343434;
  padding: 40px 20px 20px 20px;
  color: rgba(255,255,255,0.8);
  font-family: sans-serif;
  line-height: 1.6em;
  font-size: 15px;
  position: relative;
}

.no-pointer-events {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255,60,60,0.7);
  text-decoration: none;
  pointer-events: none;
}

.no-pointer-events span {
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(0,0,0,0.6);
  padding: 6px 12px;
  position: relative;
  top: 3px;
}

See the Pen HtnLq by Laki Ádám (@lakiadam) on CodePen.

A tulajdonság támogatottsága 79%-os, ami egy egész jó érték, csak IE 10- alatt nem használhatjuk (persze ez okozhat fejtörést, de idővel kikopik).

Kapcsolódó hivatkozások

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.