Visualizzatore di cursori CSS: prova tutti i tipi in tempo reale
Il visualizzatore di cursori CSS mostra tutti i 36 valori della proprietà CSS cursor, suddivisi per utilizzo e con il vero puntatore del tuo sistema. Passa, ad esempio, su not-allowed, vedrai il cerchio barrato e potrai copiare cursor: not-allowed; con un clic. Gratuito, senza registrazione: funziona tutto nel browser.
Creato da Justin Schuessler
Codice pronto? Metti online il tuo sito con un hosting web veloce e affidabile.
Tutti i valori di cursor per utilizzo
Utilizzo
36 valori su 36
L'anteprima mostra il cursore come viene visualizzato dal tuo sistema operativo e dal tuo browser. Per questo molti cursori hanno un aspetto diverso su macOS, Windows e Linux.
Generale3
autoIl browser decide automaticamente, ad esempio mostrando il cursore di testo sul testo e la freccia accanto. È il valore predefinito.
Sposta qui il mousedefaultLa normale freccia, anche sopra il testo. Per le aree non cliccabili.
Sposta qui il mousenoneNasconde il puntatore del mouse, ad esempio nei video a schermo intero, nei giochi o quando si usa un cursore personalizzato.
Sposta qui il mouse
Link e stati5
pointerLa mano con l'indice puntato per link, pulsanti e altri elementi cliccabili.
Sposta qui il mousehelpPunto interrogativo accanto alla freccia quando è disponibile un aiuto, ad esempio su un'icona informativa con tooltip.
Sposta qui il mousecontext-menuIndica che è disponibile un menu contestuale, ad esempio per elementi con un menu accessibile con il clic destro.
Sposta qui il mouseprogressFreccia con indicatore di caricamento: qualcosa si carica in background, ma la pagina resta utilizzabile.
Sposta qui il mousewaitIndicatore di caricamento senza freccia: l'interfaccia è bloccata fino al termine dell'operazione.
Sposta qui il mouse
Selezione4
textIl cursore di testo (a forma di I) per i campi di input e il testo selezionabile.
Sposta qui il mousevertical-textIl cursore di testo orizzontale per il testo disposto verticalmente, ad esempio con writing-mode: vertical-rl.
Sposta qui il mousecellUn segno più spesso per le celle selezionabili, come in un foglio di calcolo.
Sposta qui il mousecrosshairMirino per operazioni di precisione, ad esempio su aree di disegno, contagocce o ritagli di immagini.
Sposta qui il mouse
Trascina e rilascia7
grabMano aperta per gli elementi trascinabili, ad esempio schede, voci di elenco o cursori.
Sposta qui il mousegrabbingMano chiusa mentre si trascina un elemento.
Sposta qui il mousemoveCroce di frecce per gli elementi spostabili liberamente, ad esempio finestre o widget.
Sposta qui il mousecopyFreccia con il segno più: al rilascio viene creata una copia, ad esempio trascinando dei file.
Sposta qui il mousealiasFreccia con simbolo di collegamento: al rilascio viene creato un link o un collegamento.
Sposta qui il mouseno-dropL'elemento trascinato non può essere rilasciato qui, ad esempio fuori da un'area di rilascio.
Sposta qui il mousenot-allowedCerchio barrato per pulsanti disattivati e azioni attualmente non consentite.
Sposta qui il mouse
Modifica dimensioni14
col-resizeModifica la larghezza delle colonne, ad esempio trascinando i divisori nelle tabelle o nelle viste affiancate.
Sposta qui il mouserow-resizeModifica l'altezza delle righe, ad esempio trascinando i divisori orizzontali tra due aree.
Sposta qui il mousen-resizeTrascina il bordo superiore per ingrandire un elemento verso l'alto.
Sposta qui il mousee-resizeTrascina il bordo destro per allargare un elemento verso destra.
Sposta qui il mouses-resizeTrascina il bordo inferiore per ingrandire un elemento verso il basso.
Sposta qui il mousew-resizeTrascina il bordo sinistro per allargare un elemento verso sinistra.
Sposta qui il mousene-resizeTrascina l'angolo in alto a destra per modificare larghezza e altezza.
Sposta qui il mousenw-resizeTrascina l'angolo in alto a sinistra per modificare larghezza e altezza.
Sposta qui il mousese-resizeTrascina l'angolo in basso a destra per modificare larghezza e altezza.
Sposta qui il mousesw-resizeTrascina l'angolo in basso a sinistra per modificare larghezza e altezza.
Sposta qui il mouseew-resizeModifica la larghezza in entrambe le direzioni, ad esempio su uno slider orizzontale o un divisore.
Sposta qui il mousens-resizeModifica l'altezza in entrambe le direzioni, ad esempio su un divisore verticale.
Sposta qui il mousenesw-resizeTrascinamento diagonale dall'alto a destra verso il basso a sinistra, ad esempio dall'angolo di un pannello.
Sposta qui il mousenwse-resizeTrascinamento diagonale dall'alto a sinistra verso il basso a destra, ad esempio dalla maniglia nell'angolo inferiore destro di un pannello.
Sposta qui il mouse
Scorrimento e zoom3
all-scrollFrecce in tutte le direzioni: puoi scorrere il contenuto in ogni direzione, ad esempio una mappa.
Sposta qui il mousezoom-inLente con il segno più per immagini o mappe ingrandibili con un clic.
Sposta qui il mousezoom-outLente con il segno meno per ridurre con un clic un'immagine ingrandita.
Sposta qui il mouse
Area di prova: cursori in azione
Passa con il mouse sugli esempi, trascina la scheda, il divisore e l'angolo del pannello, poi clicca sull'immagine.
Pulsante
pointerPulsante disattivato
not-allowedLink di testo
Trovi maggiori informazioni nella Documentazione.
pointerCampo di input
textScheda spostabile
Carta
Trascina per spostare
grabgrabbingRidimensiona la larghezza della colonna
Colonna A · 50 %Colonna B · 50 %col-resizeTrascina l'angolo del pannello
Pannello
160 × 80 px
nwse-resizeStato di caricamento
Caricamento in background
Puoi continuare a lavorare.
Attendi
L'area è bloccata.
progresswaitImmagine ingrandibile
zoom-inzoom-out
Panoramica
Che cos'è la proprietà CSS cursor?
La proprietà CSS cursor stabilisce quale puntatore del mouse appare quando passi sopra un elemento. Indica così cosa puoi fare: la mano di pointer segnala che puoi fare clic, il cursore di testo che puoi selezionare il testo, il cerchio barrato di not-allowed che l'azione è bloccata. Se non specifichi nulla, vale auto e decide il browser.
Sintassi
Basta una parola chiave per ogni regola. Gli stati come :disabled o :active hanno ciascuno il proprio cursore:
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.card[draggable="true"] {
cursor: grab;
}
.card[draggable="true"]:active {
cursor: grabbing;
}Le classi di utilità come cursor-pointer in Tailwind CSS impostano la stessa dichiarazione cursor: pointer;. Lo strumento copia solo CSS puro, non classi.
36 valori standard
La specifica CSS prevede 36 parole chiave, da auto e pointer ai 14 cursori per il ridimensionamento. Questo strumento le mostra tutte, ordinate per utilizzo.
Si eredita
cursor si applica all'elemento e a tutti i suoi figli, finché un figlio non imposta un valore proprio. Quindi cursor: pointer su un contenitore si applica anche al testo al suo interno.
Disegnato dal sistema
CSS stabilisce solo quale cursore appare. Il suo aspetto dipende dal sistema operativo e dal browser. Per questo è diverso su macOS, Windows e Linux.
Non serve :hover
Il cursore compare solo quando il mouse si trova sopra l'elemento. Imposta quindi cursor direttamente sull'elemento: non serve una regola :hover separata.
Tipi di cursore
Panoramica di tutti i 36 tipi di cursore CSS
Lo strumento suddivide i valori della proprietà CSS cursor in sei gruppi in base all'utilizzo. Con il filtro Utilizzo puoi visualizzare un solo gruppo.
Generale3
Il valore standard auto, la freccia normale default e none, che nasconde il puntatore del mouse.
autodefaultnone
Link e stati5
La mano per gli elementi cliccabili, la guida, il menu contestuale e i due stati di caricamento progress e wait.
pointerhelpcontext-menuprogresswait
Selezione4
Cursore di testo orizzontale e verticale, il più per le celle delle tabelle e il mirino per operazioni precise.
textvertical-textcellcrosshair
Trascina e rilascia7
Mano aperta e chiusa, freccia a quattro direzioni e indicatori di rilascio: copia, collegamento, impossibile rilasciare, non consentito.
grabgrabbingmovecopyaliasno-dropnot-allowed
Modifica dimensioni14
14 cursori di ridimensionamento per bordi, angoli, colonne e righe, da n-resize a nwse-resize.
col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize
Scorrimento e zoom3
Scorrimento in tutte le direzioni e zoom con la lente (più o meno) per immagini e mappe.
all-scrollzoom-inzoom-out
Best practice
Quale cursore CSS usare e quando?
Il cursore crea un'aspettativa nell'utente. Queste regole ti aiutano a rispettarla.
pointer solo per gli elementi cliccabili
La mano indica che un clic avrà un effetto. Usala per link, pulsanti e schede cliccabili, ma non per testi o aree senza funzione.
not-allowed per gli stati disabilitati
Un pulsante disabilitato usa cursor: not-allowed. Attenzione: con pointer-events: none non appare alcun cursore specifico, perché l'elemento non rileva il mouse.
grab e grabbing per il trascinamento
grab indica che un elemento può essere trascinato. Durante il trascinamento passa a grabbing, ad esempio tramite :active o una classe impostata dal tuo script.
text per i campi di input e il testo
I campi di input hanno già il cursore di testo. Imposta text solo dove è davvero possibile selezionare o modificare il contenuto.
progress invece di wait
Se qualcosa si carica in background e la pagina resta utilizzabile, usa progress. Usa wait solo quando l'interfaccia è davvero bloccata.
none solo con un'alternativa
Un puntatore invisibile crea confusione. cursor: none è adatto ai giochi, ai video a schermo intero o a un cursore personalizzato che sostituisce quello di sistema.
Come funziona
Come trovare il cursore CSS giusto
Tre passaggi, senza registrazione né installazione.
Passaggio 1
Trova un cursore
Cerca un valore, un utilizzo come resize o drag o uno stato come disabled, oppure filtra per gruppo.
Passaggio 2
Prova i cursori
Passa con il mouse sull'anteprima di un riquadro o interagisci con gli esempi nell'area di prova per vedere il cursore reale del tuo sistema.
Passaggio 3
Copia la dichiarazione
Un clic su Copia inserisce negli appunti la dichiarazione esatta, ad esempio cursor: not-allowed;. Incollala nella tua regola CSS.
Cursori personalizzati
Impostare un cursore personalizzato con url()
Al posto di una parola chiave puoi indicare un'immagine personalizzata come puntatore del mouse. Dopo l'indirizzo dell'immagine puoi specificare le coordinate dell'hotspot, cioè il punto in cui avviene il clic. Alla fine va sempre inserita una parola chiave di riserva, nel caso l'immagine non venga caricata.
.canvas {
cursor:
url("/cursors/pencil.svg") 2 30,
crosshair;
}Sono adatti PNG e SVG. I browser mostrano cursori personalizzati solo fino a 128 × 128 pixel; la dimensione abituale è 32 × 32. L'immagine del cursore dovrebbe rendere ben visibile il punto di clic.
Scopri di più
Altri strumenti
Formatter HTML e CSS online (abbellisci il codice)
Formatta, indenta e abbellisci HTML e CSS online, con rilevamento automatico della lingua. Funziona interamente nel browser, senza caricamenti.
Creato da Luca Stanek
Convertire SVG in PNG (SVG to PNG)
NuovoConverti SVG in PNG: salva immagini vettoriali nitide a qualsiasi dimensione come PNG, JPG o WebP, con sfondo trasparente e modelli per favicon, emoji Discord e icone dei server Minecraft. Funziona interamente nel browser.
Creato da Luca Stanek
Selettore colori
Converti i colori in tempo reale tra HEX, RGB, HSL, HSV e CMYK, trova il colore CSS con nome più simile e verifica il contrasto WCAG rispetto al bianco e al nero, tutto nel browser.
Creato da Justin Schuessler
Verifica del contrasto
Calcola in tempo reale il rapporto di contrasto WCAG tra due colori e verificalo rispetto ai criteri AA/AAA e ai componenti UI, direttamente nel browser.
Creato da Justin Schuessler
Generatore di combinazioni di colori
Generi in tempo reale combinazioni di colori complementari, analoghe, triadiche e altre partendo da un colore base: nulla viene salvato o trasmesso.
Creato da Justin Schuessler
Generatore di favicon
Genera un set completo di favicon da un'immagine qualsiasi: favicon.ico, icona Apple Touch, icone Android Chrome, site.webmanifest e uno snippet HTML pronto da copiare, direttamente nel browser.
Creato da Jakub Martyniak
FAQ
Domande frequenti
Risposte brevi sulla proprietà CSS cursor e su questo strumento.
36 parole chiave in sei gruppi: Generali (auto, default, none), Link e stati (pointer, help, context-menu, progress, wait), Selezione (text, vertical-text, cell, crosshair), Drag & Drop (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 cursori per il ridimensionamento e Scorrimento e zoom (all-scroll, zoom-in, zoom-out). Puoi anche usare immagini personalizzate tramite url().
pointer è adatto a tutto ciò che attiva un'azione al clic: link, pulsanti, schede o icone cliccabili. I link mostrano già la mano per impostazione predefinita, mentre in molti browser i pulsanti no. Non usare pointer per testi o aree senza una funzione. cursor: hand è un vecchio valore non standard delle prime versioni di Internet Explorer e non rientra quindi tra i 36 valori dello strumento. Per ottenere la mano, usa cursor: pointer;.
Imposta cursor: auto sull'elemento per lasciare decidere al browser, oppure cursor: default per la freccia normale. Poiché cursor viene ereditato, puoi sovrascrivere un pointer dell'elemento padre direttamente su quello figlio. Trovi entrambi i valori nel gruppo Generale dello strumento.
cursor: not-allowed, ovvero il cerchio barrato. Se imposti anche pointer-events: none su un pulsante disabilitato, il cursore non appare più perché l'elemento ignora il mouse. Nell'area di prova puoi vedere il pulsante con not-allowed.
grab mostra una mano aperta sopra un elemento trascinabile; grabbing mostra una mano chiusa durante il trascinamento. move mostra quattro frecce e si usa per gli elementi che possono essere spostati liberamente, come finestre o widget.
progress mostra una freccia con un'icona di caricamento: qualcosa si sta caricando in background, ma la pagina resta utilizzabile. wait mostra solo l'icona di caricamento e indica che l'interfaccia è bloccata. Per la maggior parte dei caricamenti sul web è adatto progress.
Con cursor: url(cursor.svg) 2 30, crosshair; indichi un'immagine e, facoltativamente, l'hotspot, seguiti sempre da una parola chiave di riserva. I browser mostrano cursori personalizzati solo fino a 128 × 128 pixel. Questo strumento mostra i 36 valori standard: qui non puoi caricare immagini personalizzate.
Il CSS stabilisce solo quale cursore mostrare. A disegnarlo sono il sistema operativo e il browser, quindi il suo aspetto cambia tra macOS, Windows e Linux. I dispositivi touch non hanno un puntatore del mouse: su questi dispositivi lo strumento mostra un elenco con descrizioni e pulsanti per copiare. Funziona tutto nel browser, senza caricare file.
Hai altre domande?
Contatta il supportoIl tuo sito web ha bisogno di un hosting affidabile
Un VPS di ZAP-Hosting mette online il tuo sito in modo affidabile.
Nessuna configurazione. Nessun rischio. Online in pochi secondi.
Cerchi altri strumenti? Visualizza tutti gli strumenti per sviluppatori
Fonte preferita su Google
