CSS Cursor: tutti i valori, cursori custom e opacity
Galleria dei cursori CSS
CSS Cursor: ogni valore da provare, cursori custom, opacity | We.Inc
Passa il mouse su un riquadro per ognuno dei 36 valori standard di cursor, crea un cursore immagine custom con hotspot e fallback e scopri quando sfumare con opacity, visibility o rgba.
La proprietà cursor imposta il puntatore del mouse mostrato sopra un elemento, per esempio cursor: pointer per gli elementi cliccabili, not-allowed per i controlli disabilitati e grab per gli elementi trascinabili. I cursori custom usano url() con un'immagine, coordinate opzionali dell'hotspot e una parola chiave di fallback obbligatoria. Passa il mouse su ogni riquadro qui sotto per vedere tutti i 36 valori standard nel tuo browser.
I cursori che userai di più
Stato
CSS
Tailwind
Link o pulsante
cursor: pointer
Controllo disabilitato
cursor: not-allowed
Trascinabile / in trascinamento
cursor: grab / grabbing
cursor-grab / cursor-grabbing
Testo modificabile
cursor: text
Ridimensionare una colonna
cursor: col-resize
Occupato ma utilizzabile
cursor: progress
È facile sbagliare i nomi dei cursori, e ogni sistema operativo li disegna in modo leggermente diverso. Questa galleria ti permette di provare ogni parola chiave nel tuo browser, poi mostra come creare un cursore immagine custom che abbia comunque un fallback corretto, insieme ai trucchi di opacity per gli stati sbiaditi e disabilitati.
Passa il mouse su un riquadro della galleria per vedere quel cursore come lo disegna il tuo sistema. Clicca un riquadro per copiarne la dichiarazione.
Usa il filtro per restringere l'elenco ai cursori di link, ridimensionamento, trascinamento o stato.
Apri il generatore di cursori custom, regola l'hotspot e prova il risultato nell'area di test.
Leggi la sezione su opacity per scegliere tra opacity, visibility e colori rgba per le dissolvenze.
I browser mostrano già pointer sui link. Aggiungilo tu a pulsanti e altri elementi cliccabili, perché i pulsanti di default mostrano la freccia.
Tieni le immagini dei cursori custom a 32 per 32 pixel o meno. Immagini più grandi possono essere ignorate da alcuni browser e sistemi operativi.
Chiudi sempre un elenco di cursori con una parola chiave come auto o pointer. La parola chiave è obbligatoria dopo i valori url().
Gli schermi touch non hanno alcun cursore, quindi non usare mai il cursore come unico segnale che qualcosa è interattivo.
Domande frequenti
Come creo un cursore custom in CSS?
Scrivi cursor: url(cursor.svg) 4 4, auto; dove l'immagine è un piccolo file PNG, SVG o CUR, i due numeri sono l'hotspot in pixel dall'angolo in alto a sinistra e auto è la parola chiave di fallback usata se l'immagine non funziona. Puoi elencare più immagini url() prima della parola chiave.
Quale cursore dovrebbe mostrare un pulsante disabilitato?
not-allowed è la scelta abituale. Applicalo con button:disabled { cursor: not-allowed; opacity: 0.5; } e mantieni il vero attributo disabled, così anche chi usa tastiera e screen reader viene informato che il controllo non è disponibile, non solo chi usa il mouse.
Qual è la differenza tra opacity e visibility?
opacity sfuma l'intero elemento, figli compresi, e un elemento completamente trasparente riceve ancora clic e focus. visibility: hidden disattiva l'elemento sia per il puntatore sia per le tecnologie assistive, mantenendone lo spazio. Usa opacity per la dissolvenza e cambia visibility alla fine, così gli elementi invisibili non possono essere cliccati.
Perché opacity rende trasparente anche il mio testo?
opacity si applica a tutto ciò che sta dentro l'elemento. Per rendere trasparente solo lo sfondo, usa invece un colore traslucido: background-color: rgb(0 0 0 / 0.5), oppure il più vecchio rgba(0, 0, 0, 0.5). Il testo resta completamente opaco.
Posso nascondere il cursore?
cursor: none lo nasconde sopra l'elemento, cosa che a volte serve a giochi, chioschi e player video. Usalo con parsimonia sui siti normali, perché le persone perdono di vista dove stanno puntando.
I cursori sono suggerimenti, non controlli
Il cursore dice a chi usa il mouse cosa succederà prima del clic. Un pointer promette un elemento cliccabile, un cursore di testo promette testo selezionabile o modificabile e una freccia di ridimensionamento promette un trascinamento. Mostrare un pointer su qualcosa che non fa nulla è una promessa tradita.
Chi usa tastiera, touch o screen reader non vede mai questi suggerimenti. Gli elementi interattivi devono comunque sembrare interattivi, avere uno stile di focus visibile e usare veri pulsanti e link, così il loro ruolo viene annunciato.
Cursori immagine custom che non si rompono
L'immagine di un cursore viene scaricata come qualsiasi altra immagine, quindi un download lento o fallito lascia attiva la parola chiave di fallback. Un SVG inline in data: evita del tutto la richiesta e resta nitido sugli schermi ad alta densità.
L'hotspot è il pixel esatto che fa clic. Per una freccia è la punta, di solito vicino a 0 0; per un mirino o un cerchio è il centro. Un hotspot sbagliato fa arrivare i clic qualche pixel lontano da dove le persone mirano.
Sfumare gli elementi nel modo giusto
Per un aspetto disabilitato, combina opacity intorno a 0.5 con cursor: not-allowed e l'attributo disabled. Verifica che il testo sbiadito rispetti ancora i requisiti di contrasto se le persone devono leggerlo.
Per le comparse al passaggio del mouse, anima opacity perché è economica da renderizzare e abbinala a visibility, così l'elemento non può essere cliccato mentre è trasparente. Un colore con canale alfa è lo strumento giusto quando deve essere traslucido un solo livello, come uno sfondo o un bordo.
Tutti i 36 valori di cursor
Parole chiave standard di cursor (CSS Basic User Interface Level 4); le classi Tailwind sono cursor-<value>
Valore
Gruppo
Significato
Generali
Il browser decide in base al contesto
Generali
La freccia di sistema
Generali
Nessun cursore disegnato
Link e stato
È disponibile un menu contestuale
Link e stato
È disponibile un aiuto
Link e stato
Un link o un controllo cliccabile
Link e stato
Occupato, ma puoi ancora interagire
Link e stato
Occupato, non puoi ancora interagire
Selezione
Si possono selezionare una o più celle di tabella
Selezione
Selezione bidimensionale precisa
Selezione
Il testo può essere selezionato o modificato
Selezione
Il testo verticale può essere selezionato
Trascinamento
Verrà creato un collegamento o alias
Trascinamento
Qualcosa verrà copiato
Trascinamento
Qualcosa verrà spostato
Trascinamento
Non puoi rilasciare qui
Trascinamento
L'azione non è consentita
Trascinamento
Può essere afferrato e trascinato
Trascinamento
In fase di trascinamento
Ridimensiona e scorri
Puoi scorrere in qualsiasi direzione
Ridimensiona e scorri
Ridimensiona una colonna in orizzontale
Ridimensiona e scorri
Ridimensiona una riga in verticale
Ridimensiona e scorri
Sposta il bordo superiore
Ridimensiona e scorri
Sposta il bordo destro
Ridimensiona e scorri
Sposta il bordo inferiore
Ridimensiona e scorri
Sposta il bordo sinistro
Ridimensiona e scorri
Sposta l'angolo in alto a destra
Ridimensiona e scorri
Sposta l'angolo in alto a sinistra
Ridimensiona e scorri
Sposta l'angolo in basso a destra
Ridimensiona e scorri
Sposta l'angolo in basso a sinistra
Ridimensiona e scorri
Ridimensiona a sinistra o a destra
Ridimensiona e scorri
Ridimensiona in alto o in basso
Ridimensiona e scorri
Ridimensiona lungo la diagonale ascendente
Ridimensiona e scorri
Ridimensiona lungo la diagonale discendente
Zoom
Puoi ingrandire
Zoom
Puoi ridurre
Cursore custom con hotspot e fallback
Cursore ad anello in SVG inline centrato sul suo hotspot
L'hotspot 12 12 porta il clic al centro dell'anello. Se l'immagine non viene accettata si usa crosshair.
Stati disabilitato, trascinamento e ridimensionamento
Cursori coerenti con l'interazione
Passa il mouse su ogni elemento. La card trascinabile passa a grabbing mentre tieni premuto il pulsante del mouse.
opacity vs visibility vs rgba
Come scegliere il tipo di dissolvenza
Tecnica
Influisce sui figli?
Ancora cliccabile?
Si anima in modo fluido?
Tailwind
opacity: 0.5
Sì, tutto ciò che contiene
Sì
Sì
visibility: hidden
Sì (i figli possono riattivarsi)
No
Cambia all'istante
background: rgb(0 0 0 / 0.5)
No, solo quel livello
Sì
Sì
bg-black/50
color: rgb(17 17 17 / 0.6)
No, solo il testo
Sì
Sì
text-black/60
Opacity sull'intero elemento accanto a uno sfondo traslucido
Il banner di sinistra sbiadisce il testo insieme al riquadro. Quello di destra mantiene il testo nitido sopra uno sfondo trasparente.