L'uso della pseudoclasse hover consente di cambiare lo stile di un elemento quando il mouse vi passa sopra. Si consideri l'esempio qui sotto:

In questo caso nella pagina è presente un quadrato colorato (realizzato con un div). Passando col mouse su di esso, le sue dimensioni cambiano, come si può vedere dall'esempio qui sotto:

Con i fogli stile CSS3 è possibile temporizzare le transizioni, cioè assegnare loro una durata. Si osservi l'esempio seguente, leggermente modificato rispetto a prima:

L'effetto prodotto è mostrato qui sotto:

Come si può osservare ora, quando si passa col mouse sul quadrato viene avviata una transizione graduale della durata di 2 secondi.

ATTENZIONE: le proprietà di transizione, trasformazione e animazione non sono supportate da tutti i browser nello stesso modo. In alcuni casi occorre modificare la sintassi standard per adattarla al particolare browser. La situazione è in continua evoluzione, con un numero sempre maggiore di browser che adottano la sintassi CSS3 standard. Non si ritiene opportuno in questa sede approfondire ulteriormente l'argomento. Tutti gli esempi forniti funzionano correttamente con l'ultima versione di Chrome.

La sintassi delle transizioni è abbastanza semplice:

L'elenco delle proprietà indica quali proprietà dell'oggetto devono essere soggette a transizione e la durata (espressa in secondi o in millisecondi) indica la durata della transizione stessa.

ATTENZIONE: si osservi che le proprietà della transizione devono essere specificate sul selettore dell'elemento (nel nostro caso DIV) e NON sul selettore della pseudoclasse hover.

E' inoltre possibile specificare un tempo di ritardo sull'avvio della transizione (dal momento in cui il mouse passa sull'elemento) e anche fornire tempi diversi per le diverse proprietà su cui applicare la transizione, come nel seguente esempio:

che produce questo effetto:

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania