Pubblicato il 30/10/11e aggiornato il

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

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.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.