Modificare la forma del cursore con i fogli di stile (CSS).

Il cursore assume delle forme diverse a seconda dell'elemento a cui passa sopra. Questo accade praticamente in tutti i siti e con tutti i browser. In linea di massima lo vediamo cambiare almeno in tre modalità: freccia bianca inclinata a sinistra (forma di default), barra verticale lampeggiante (nei campi in cui si deve inserire del testo) e mano con indice puntato (quando il cursore passa sopra un link).

Mi sono già occupato di come personalizzare la forma del cursore introducendo una immagine che lo sostituisca

1. Cursore personalizzato -
2. Cursore personalizzato che funzioni anche con Internet Explorer -

Con questo breve articolo voglio illustrare come modificare la forma del cursore soltanto attraverso i CSS, inserendo cioè l'attributo style in un paragrafo o in un contenitore del tipo div. L'operazione si può fare modificando il modello oppure direttamente nel post. Il primo caso è da sconsigliare quindi non lo tratterò neppure. Se si vuole cambiare la forma del cursore in una particolare zona del testo bisogna prima conoscere quali sono gli attributi supportati

move	Una croce a quattro punte
text	Una barra verticale
help	Freccia con punto interrogativo
hand	Una mano puntata
not-allowed	Un cerchio con barra diagonale (azione non permessa)
vertical-text	Una barra orizzontale

Ci sono molti altri attributi meno usati di questi. La sintassi da usare è la seguente

<p style='cursor:help;'>Testo del paragrafo</p>

dove l'attributo help può essere sostituito da tutti gli altri supportati. Come spesso accade con questi tag, non tutti i browser si comportano nello stesso modo. Gli attributi della precedente tabella dovrebbero però funzionare con tutti quelli più recenti. Concludo il post con una serie di esempi pratici

Per mostrare il cursore come un punto interrogativo occorre inserire come stile cursor: help;

Al passaggio del mouse sopra a questo testo, il cursore si vedrà come un punto interrogativo.

Per mostrare il cursore come una croce a quattro punte occorre inserire come stile cursor: move;

Al passaggio del mouse sopra a questo testo, il cursore si vedrà una freccia con quattro punte.

Per mostrare il cursore come una barra verticale occorre inserire come stile cursor: text;

Al passaggio del mouse sopra a questo testo, il cursore si vedrà come una barra verticale.