Ho trovato una soluzione che ha funzionato per me ...
Se hai una voce di elenco (o div) contenente solo il link, e diciamo che questo è per i link sociali sulla tua pagina a Facebook, Twitter, ecc. e stai usando un'immagine sprite puoi farlo:
<li id="facebook"><a href="facebook.com"></a></li>
Rendi lo sfondo di "li" la tua immagine del pulsante
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Quindi imposta l'immagine di sfondo del link nello stato al passaggio del mouse del pulsante. Aggiungi anche l'attributo opacity a questo e impostalo su 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Ora tutto ciò di cui hai bisogno è "opacity" sotto "a: hover" e impostalo su 1.
#facebook a:hover {
opacity:1;
}
Aggiungi gli attributi di transizione dell'opacità per ogni browser a "a" e "a: hover" in modo che il css finale avrà un aspetto simile a questo:
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
Se ho spiegato correttamente che dovrebbe farti avere un pulsante dell'immagine di sfondo in dissolvenza, spero che almeno aiuti!
background-image
non è una proprietà animabile ( w3.org/TR/css3-transitions/#animatable-properties ), quindi la tua soluzione non è conforme agli standard.