I diversi cursori in CSS

In CSS, puoi personalizzare il cursore del mouse utilizzando la proprietà cursor, che ti consente di scegliere tra una varietà di cursori predefiniti o persino di utilizzare un'immagine personalizzata.

Ad esempio, prova a passare sopra a questi elementi con il mouse:

Passando sopra con il mouse su questi tre elementi, vedrai che l'icona del cursore si modifica di volta in volta. Vediamo come cambiare il cursore con CSS.

Come utilizzare la proprietà cursor

La proprietà CSS cursor permette di modificare l'icona del cursore del mouse.

Questa proprietà accetta i seguenti valori:

Una keyword di un cursore predefinito. La proprietà cursor accetta 36 diversi cursori predefiniti.
L'URL di un'immagine. La proprietà cursor accetta un'immagine, possibilmente 32x32px, come cursore. L'URL può essere inserito tramite la funzione url().

Ecco, ad esempio, come scegliere il cursore :

div {
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

Nell'esempio, passando sopra il <div>, il cursore diventerà a forma di mano.

Possiamo scegliere anche un'immagine come cursore. Prova a passare sopra questo elemento:

Passa sopra a questo elemento con il mouse

div {
  padding: 80px 10px;
  cursor: url('https://biadets.com/language/css/img/smile.png');
  background-color: AntiqueWhite;
  text-align: center;
}

Tutti i tipi di cursori diversi

Esistono 36 tipi di cursori differenti da utilizzare con cursor. Li abbiamo elencati in questa tabella, e puoi passarci sopra con il mouse per vedere come viene visualizzato un certo tipo di cursore. Puoi anche vedere l'icona del cursore a destra, ma tieni conto che l'icona cambia in base al sistema operativo.

Cursore	Descrizione	Icona
`auto`	Cursore predefinito del browser.
`default`	Freccia standard.
`none`	Nasconde il cursore.
`context-menu`	Indica che è disponibile un menu contestuale.
`help`	Punto interrogativo, indica la possibilità di ottenere aiuto.
`pointer`	Mano puntata, usata per elementi cliccabili.
`progress`	Indica un caricamento in corso.
`wait`	Indica un caricamento mentre il sistema è occupato.
`cell`	Indica che una cella può essere selezionata.
`crosshair`	Mirino a croce.
`text`	Cursore per selezione di testo orizzontale.
`vertical-text`	Cursore per selezione di testo verticale.
`alias`	Indica che l'elemento rappresenta un alias.
`copy`	Indica che l'elemento verrà copiato.
`move`	Indica che l'elemento può essere spostato.
`no-drop`	Indica che l'elemento non può essere rilasciato.
`not-allowed`	Indica che un'azione non è consentita.
`grab`	Indica che l'elemento può essere afferrato.
`grabbing`	Indica che l'elemento è afferrato.
`e-resize`	Indica che l'elemento può essere ridimensionato orizzontalmente verso destra.
`n-resize`	Indica che l'elemento può essere ridimensionato verticalmente verso l'alto.
`ne-resize`	Indica che l'elemento può essere ridimensionato in diagonale verso l'alto a destra.
`nw-resize`	Indica che l'elemento può essere ridimensionato in diagonale verso l'alto a sinistra.
`s-resize`	Indica che l'elemento può essere ridimensionato verticalmente verso il basso.
`se-resize`	Indica che l'elemento può essere ridimensionato in diagonale verso il basso a destra.
`sw-resize`	Indica che l'elemento può essere ridimensionato in diagonale verso il basso a sinistra.
`w-resize`	Indica che l'elemento può essere ridimensionato orizzontalmente verso sinistra.
`ew-resize`	Indica che l'elemento può essere ridimensionato orizzontalmente in entrambe le direzioni.
`ns-resize`	Indica che l'elemento può essere ridimensionato verticalmente in entrambe le direzioni.
`nesw-resize`	Indica che l'elemento può essere ridimensionato in diagonale in entrambe le direzioni (NE/SW).
`nwse-resize`	Indica che l'elemento può essere ridimensionato in diagonale in entrambe le direzioni (NW/SE).
`col-resize`	Indica che la larghezza della colonna può essere modificata.
`row-resize`	Indica che l'altezza della riga può essere modificata.
`all-scroll`	Indica che l'elemento può essere spostato in qualsiasi direzione.
`zoom-in`	Indica che l'elemento può essere ingrandito.
`zoom-out`	Indica che l'elemento può essere rimpicciolito.

Prova!Completa gli spazi vuoti con il testo appropriato.

/* Specifica l'immagine come cursore della pagina con CSS */
body {
: ("cursore.png");
}

Prova!Scegli l'opzione corretta tra quelle elencate.

/* Specifica l'icona della mano come cursore */
div {
cursor: ____________;
}

	default
	help
	pointer