English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Proprietà del cursore CSS, utilizzate per definire il tipo di cursore (cioè il puntatore del mouse) quando il mouse si muove su una certa area o su un link del sito web.
Di solito, i browser mostrano il puntatore del mouse su qualsiasi parte vuota del sito web, un guanto su qualsiasi link o elemento cliccabile e un cursore di modifica su qualsiasi testo o campo di testo. Utilizzando CSS, è possibile ridefinire queste proprietà per visualizzare cursori diversi.
h1 {
cursor: move;
}
p {
cursor: test;
}Prova a vedere‹/›Il seguente esempio mostra i cursori diversi accettati dalla maggior parte dei browser. Metti il mouse sopra il link "TEST" nella colonna di output per visualizzare il cursore.
| Visualizza | valore | Esempio | Visualizza |
|---|---|---|---|
| predefinito | a:hover{cursor:default;} | Prova | |
| puntatore | a:hover{cursor:pointer;} | Prova | |
| testo | a:hover{cursor:text;} | Prova | |
| in attesa | a:hover{cursor:wait;} | Prova | |
| aiuto | a:hover{cursor:help;} | Prova | |
| progress | a:hover{cursor:progress;} | Prova | |
| crosshair | a:hover{cursor:crosshair;} | Prova | |
| move | a:hover{cursor:move;} | Prova | |
| url() | a:hover{cursor:url("custom.cur"), default;} | Prova |
VisualizzaPiù cursori»
può avere anche un cursore completamente personalizzato.
L'attributo cursor gestisce una lista di valori di cursore definiti dall'utente, seguita daCursore universale. Se il primo cursore specificato è errato o non trovato, verrà utilizzato il prossimo cursore nella lista elencata, fino a trovare un cursore disponibile.
Se non ci sono cursori utente validi o supportati dal browser, verrà utilizzato il cursore universale alla fine della lista.
Suggerimento:Il formato standard utilizzabile per i cursori è il formato .cur. Ma puoi utilizzare software di conversione di immagini gratuiti online per convertire immagini come .jpg e .gif in formato .cur.
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}Prova a vedere‹/›Nell'esempio sopra, custom.gif e custom.cur sono file di cursore personalizzato caricati sul tuo spazio del server, e default è il cursore universale. Se il cursore personalizzato viene perso o il browser del visualizzatore non lo supporta, verrà utilizzato il cursore universale.
Attenzione:Se si desidera dichiarare un cursore personalizzato, deve essere definito alla fine della listaCursore universaleAltrimenti, il cursore personalizzato non verrà visualizzato correttamente.
Questa è una dimostrazione live del cursore personalizzato.
Attenzione: IE9 e versioni precedenti supportano solo valori di URL di cursori statici .cur e animazioni di luce .ani. Tuttavia, browser come Firefox, Chrome e Safari supportano .cur, .png, .gif e .jpg, ma non .ani.