- Learn
- Guida CSS Tecniche essenziali
- Cambiare il cursore del mouse con il CSS
Cambiare il cursore del mouse con il CSS
Il cursore del mouse ci consente di rendere più semplice ed intuitiva l’interfaccia delle nostre pagine web aiutando l’utente a muoversi al loro interno. Fin dall’inizio della nostra esperienza web abbiamo imparato che un cursore a forma di mano indica un link, un cursore rappresentato da una barra verticale consente di selezionare del testo e così via.
Ci sono alcuni casi, però, in cui si ha la necessità di modificare il cursore di default adattandolo ad una particolare interfaccia. I CSS ci consentono di personalizzare il cursore del mouse in maniera molto semplice, è sufficiente una sola riga di codice:
button { cursor: pointer; }
CSS cursor
La proprietà cursor
consente di scegliere il tipo di cursore da utilizzare per il selettore. In questo caso è stato scelto il classico cursore a forma di mano per i campi di tipo button
.
Ovviamente non si ha disposizione la sola “manina” ma sono diversi quelli a disposizione. Nella specifica 2.1 del CSS i cursori a disposizione sono i seguenti:

Bisogna fare alcune piccole precisazioni sul cursore url
. Le dimensioni del file devono essere al massimo di 32×32 pixel. Internet Explorer accetta file di tipo .cur:
button { cursor: url('pointer.cur'); }
Firefox si aspetta un secondo parametro diverso da url
:
button { cursor: url('pointer.cur'), auto; }
Nel CSS3 sono stati introdotti i seguenti cursori:

Possiamo vedere un esempio di tutti i cursori appena visti nel seguente esempio.
Bisogna fare molta attenzione all’utilizzo di cursori personalizzati perché, se utilizzati in circostanze errate, possono causare il disorientamento dell’utente. Soprattutto è sconsigliatissimo modificare i valori di default a cui sono abituati gli utenti, come ad esempio modificare il cursore dei link.
Supporto dei browser
I cursori integrati nella versione 2.1 del CSS risultano compatibili con la maggior parte dei browser, Internet Explorer 6 incluso. Problemi si hanno, invece, con i cursori integrati nella versione 3. Opera non fornisce alcun tipo di supporto mentre IE8 e Safari non supportano i primi tre della precedente lista.
Se vuoi aggiornamenti su Cambiare il cursore del mouse con il CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali: