cursor în CSS

cursor: pointer;     /* deget arătător pentru elemente clicabile */
cursor: not-allowed; /* cerc tăiat pentru acțiuni blocate */
cursor: grab;        /* mână deschisă pentru elemente glisabile (drag) */
cursor: default;     /* săgeată standard */

Ce face cursor

Proprietatea cursor oferă utilizatorului un indiciu vizual imediat despre acțiunea pe care o poate face.

• pointer: mâna cu degetul arătător, folosită pentru butoane și linkuri.
• not-allowed: semnalizează că un buton este dezactivat.
• grab și grabbing: pentru hărți sau carusele care pot fi trase cu mouse-ul.
• text: bara verticală pentru selecție de text.

Valori uzuale

Valoare	Descriere
pointer	Indică o legătură sau un buton clicabil.
not-allowed	Indică o acțiune interzisă sau un buton dezactivat.
grab / grabbing	Indică un element care poate fi tras cu mouse-ul.
wait	Indică o operațiune în curs (clepsidră/cerc).

Exemple

Exemplul 1: Indicii de interacțiune pe butoane active și dezactivate

cursor ajută enorm utilizatorul să înțeleagă ce e clicabil.

.buton-activ {
  cursor: pointer;
}
.buton-blocat {
  cursor: not-allowed;
  opacity: 0.6;
}

Efect vizual în browser

Pe butonul activ cursorul devine mânuță, iar pe cel blocat arată cercul roșu/gri barat.

Greșeli frecvente

• Punerea de cursor: pointer pe texte sau titluri care nu fac nimic dacă dai clic pe ele (induce utilizatorul în eroare).

Comenzi înrudite

• user-select: Controlează dacă utilizatorul poate selecta textul dintr-un element prin tragere cu cursorul mouse-ului.
• Pseudo-clase (:hover, :focus, :active, :nth-child): Stilizează un element în funcție de starea sa (interacțiune cu mouse-ul, tastatura) sau poziția structurală în listă.