disign.it | CSS: rollover immagini | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.646 visualizzazioni

CSS: rollover immagini

21/02/2012

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]

← PHP: listato della struttura dei Db presenti sul server Htaccess: ridirezionare un dominio →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.