CSS: rollover immagini

Un altro modo semplice per costruire un roll over attraverso le regole CSS, fruendo della proprietà display che rende un oggetto visibile o nascosto.
In questo esempio scriviamo quattro regole CSS, definendo la regola display  block / none per l'immagine (una classe on e una off) e la stessa coppia per il contenitore dell'immagine sullo stato hover.
Nel codice HTML al contenitore (può essere anche uno span) assegnamo la classe prima definita, e all'interno inseriamo in sequenza le due immagini, l'una con classe off, l'altra con classe on.
Ecco il codice:

CSS

.off {
    display: block;
}
 
.on {
    display: none;
}
 
 
.roll:hover .off {
    display: none;   
}
 
.roll:hover .on {
    display: block; 
}

HTML
[span class="roll"]
[img class="off" src="../images/adr_en.png" /]
[img class="on" src="../images/adr_en_off.png" /]
[/span]