CSS: sfruttare appieno la proprietà :hover
This entry was posted on June 26th, 2009 and is filed under CSS.
Come ho anticipato ieri, il post precedente era di “presentazione” all’articolo di oggi. Anche oggi quindi si parla di CSS e di una tecnica che consente di realizzare effetti rollover più avanzati nelle nostre pagine web sfruttando l’ereditarietà delle classi web.
La proprietà :hover del CSS ci consente di modificare lo stile di un elemento quando ci si passa su il mouse. Il codice seguente quindi altro non fa che colorare di rosso un collegamento al passaggio del mouse su di esso:
a { color: black; }
a:hover { color: red; }
Quindi supponendo di avere questo codice html nella nostra pagina:
<a href="#">Link di <strong>Prova</strong></a>
al passaggio del mouse tutto il testo contenuto tra i tag <a></a> diventerà di colore rosso. Ma se volessimo colorare solo il testo in grassetto contenuto nel link durante il passaggio?
Sono sincero, non avevo mai pensato a questa possibilità finchè non ho letto l’articolo che presento oggi. Merlinox sul suo blog tratta l’argomento mostrandoci come sfruttare lo stato dei link e l’ereditarietà del CSS per creare effetti rollover avanzati nelle nostre pagine web.
L’articolo è raggiungibile al seguente link:
Via | Merlinox’s Blog
Benvenuto! Mi chiamo