Modificare l’aspetto del cursore con i CSS

24 giugno 2013

I CSS offrono un meccanismo per modificare l’aspetto del cursore quando si passa con il mouse sopra un elemento.

Tale meccanismo è gestito con la proprietà cursor. È una proprietà ereditata e si applica a tutti gli elementi.

Sintassi ed esempi

selettore {cursor: valore;}

cursor può assumere uno di questi valori. È possibile praticamente usare tutti i tipi di cursore abituali dell’interfaccia utente che usate. Ecco la lista:

auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | 
n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help

Ecco un’immagine riassuntiva dei vari tipi:

Figura 1 – Tipi di cursore

screenshot

L’uso più tipico di questa proprietà è quello di modificare l’aspetto del cursore in corrispondenza dei link, di pulsanti o di aree speciali della pagina. La modifica del cursore va attivata ricorrendo alla pseudo-classe :hover. Se si vuole cambiare il classico puntatore con un altro cursore basta questa regola:

a:hover {cursor: valore;}
Tutte le lezioni

1 ... 29 30 31 ... 33

Se vuoi aggiornamenti su Modificare l'aspetto del cursore con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Modificare l'aspetto del cursore con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy