Sono Andrea Tonin di Rovigo, sono web-designer di professione. Il mio lavoro consiste nel fornire ai miei clienti interfacce di navigazione accattivanti e personalizzate. Questa esigenza lavorativa mi ha portato a sviluppare una buona conoscenza delle tecniche HTML e CSS. Spero che questo corso pratico di CSS vi possa essere utile :)

In CSS è possibile modificare il puntatore del mouse con l’istruzione – cursor –

Pilotare l’icona del cursore del mouse ci permette di suggerire determinate azioni all’utente, aiutandolo nella navigazione del nostro sito web.

Vediamo un esempio pratico nel seguente codice:

<!DOCTYPE html>
<html>
 
<head>
<title>Titolo del documento</title>
 
</head>
 
<body>

<!-- Applico per comodità lo stile direttamente in body, per facilitare la lettura del codice --!>
<p>Muovi il mouse sopra le scritte per vedere come cambia il cursore!</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

</body>
 
</html>

Il tag – span – ci permette direttamente di estrapolare parte del testo per applicare uno stile.

Vediamo il risultato finale qui sotto:

Muovi il mouse sopra le scritte per vedere come cambia il cursore!

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

Il valore default costringe l’icona ad essere quella predefinita del sistema operativo in uso.
Il valore auto permette al browser di selezionare il cursore più appropriato in base all’operazione corrente.

Il mio sito ufficiale>