`pointer-events` în CSS

Design Responsiv și Interfață CSS3+ (Chrome 1, Firefox 1.5, Safari 4)

Stabilește dacă un element poate fi ținta clicurilor, a atingerilor și a hover-ului, sau dacă acestea trec prin el.

Sintaxă CSS

pointer-events: none;  /* elementul nu mai primește clicuri */
pointer-events: auto;  /* comportament normal */

Ce face `pointer-events`

Cu pointer-events: none, mouse-ul și degetul „trec” prin element: clicul ajunge la ce se află dedesubt, iar :hover și cursorul nu se mai aplică elementului. Este util pentru straturi decorative puse peste conținut (gradienți, iconițe, etichete).

Proprietatea se moștenește. Un copil poate reactiva interacțiunea cu pointer-events: auto, chiar dacă părintele are none; așa se fac containere transparente pentru clic care conțin butoane funcționale.

Pentru elementele SVG există și valori specifice (visiblePainted, fill, stroke, all), care decid dacă umplerea sau conturul formei primește clicul.

Valori uzuale

Valoare	Descriere
`auto`	Comportament normal: elementul primește evenimentele de pointer.
`none`	Elementul nu este țintă; evenimentele trec la elementele de dedesubt.
`visiblePainted`	(SVG) Doar zonele vizibile și desenate (umplere sau contur) primesc clicul.
`fill / stroke`	(SVG) Doar umplerea, respectiv doar conturul formei primesc clicul.
`all`	(SVG) Toată forma primește clicul, indiferent de vizibilitate.

Exemple

Exemplul 1: Gradient decorativ peste o listă, fără să blocheze clicurile

Stratul de estompare de la baza listei nu împiedică selectarea ultimelor orașe.

.lista-orase {
  position: relative;
}
.lista-orase::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

Efect vizual în browser

Ultimele orașe din listă (Iași, Suceava) sunt acoperite de un gradient alb, dar rămân clicabile: clicul trece prin gradient și ajunge la link.

Exemplul 2: Link de pas dezactivat într-un formular de comandă

Pasul „Plată” devine inactiv până la completarea adresei.

.pas[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}