Modificare il cursore
Per modificare l'aspetto del cursore del mouse dobbiamo usare la proprietà cursor che può avere i seguenti valori:
| proprietà | descrizione | provalo! (passa il mouse sulla casella) |
|---|---|---|
| auto | il cursore dipende dal tipo di elemento su cui si trova | |
| default | il cursore di default | |
| none | il cursore viene nascosto | |
| context-menu | si usa per indicare che per quell'elemento è disponibile un menu contestuale | |
| help | si usa per indicare che è disponibile un aiuto per l'elemento | |
| pointer | indica un link | |
| progress | si usa per indicare che un processo è in corso ma comunque l'utente può usare la pagina | |
| wait | si usa per indicare che un processo è in corso e l'utente non può usare la pagina | |
| cell | indica che una o più celle possono essere selezionate | |
| crosshair | si usa per indicare una selezione | |
| text | si usa per indicare che un testo può essere scritto o selezionato | |
| vertical-text | indica che un testo verticale può essere selezionato | |
| alias | indica che è in corso la creazione di un alias o una scorciatoia | |
| copy | indica che è in corso una operazione di copia | |
| move | indica che è in corso uno spostamento | |
| no-drop | indica che l'elemento che si sta trascinando non può essere rilasciato nel punto in cui si trova il cursore | |
| not-allowed | indica che l'operazione che si sta cercando di fare non è consentita | |
| grab | indica che l'elemento può essere trascinato | |
| grabbing | indica che è in corso una operazione di trascinamento | |
| e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize | indica che un angolo dell'elemento può essere trascinato per eseguire un ridimensionamento (nell'esempio e-resize) | |
| ew-resize, ns-resize, nesw-resize, nwse-resize | indica un ridimensionamento bidimensionale (nell'esempio nesw-resize) | |
| col-resize | indica che una colonna può essere ridimensionata orizzontalmente | |
| row-resize | indica che una riga può essere ridimensionata verticalmente | |
| all-scroll | indica che l'elemento può essere fatto scorrere in tutte le direzioni | |
| zoom-in, zoom-out | indica che l'elemento può essere zoomato (nell'esempio zoom-in) |
div {
cursor: pointer;
}Un'immagine come cursore
E' anche possibile usare un'immagine al posto della freccina di default. L'immagine deve essere in formato .PNG, .cur, .ico o una SVG anche se non tutti i browser supportano tutti i formati. E' buona norma inserire anche un cursore alternativo nel caso in cui l'immagine non venga caricata.
Passa il mouse su questa casella e vedrai il cursore trasformarsi nella zampina di un gattino!
div {
cursor: url('https://www.appunti-digitali.it/images/examples/zampina.png');
}