span: hover non funziona in Firefox ma funziona in Chrome

Ho un pezzo di codice che non funziona in Firefox. L’immagine .icon non cambia quando si passa il mouse sul pulsante. Funziona perfettamente in Chrome.

 button.add-to-cart-button .button-left .icon { display: block; position: absolute; left: 0;/*RW 6px; */ top: 0;/*RW 6px; */ width: 35px;/*RW 21px; */ height: 31px;/*RW 19px; */ background: url(http://sofit.miximages.com/css/add_to_cart.gif) 50% 50% no-repeat; } button.add-to-cart-button .button-left { display: block; text-indent: -5000px; overflow: hidden; padding-left: 0px !important;/*RW 2px */ width: 35px !important;/*RW 30px */ position: relative; font-size: 11px; text-align: center; border: 0px; height: 31px; margin: 0px; } button.add-to-cart-button:hover span.button-left:hover span.icon:hover { background: url("http://sofit.miximages.com/css/add_to_cart-over.gif") 50% 50% no-repeat !important; display: block; border: none; } 
 

JS Fiddle: http://jsfiddle.net/dKcdK/14/

Il tuo problema è che Firefox non risponde al :hover selector di un elemento se è figlio di un button . Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=843003 .

Puoi semplificare il tuo CSS allegando :hover passa il :hover al button invece:

 button.add-to-cart-button .button-left .icon { display: block; position: absolute; left: 0;/*RW 6px; */ top: 0;/*RW 6px; */ width: 35px;/*RW 21px; */ height: 31px;/*RW 19px; */ background: url(http://sofit.miximages.com/css/add_to_cart.gif) 50% 50% no-repeat; } button.add-to-cart-button .button-left { display: block; text-indent: -5000px; overflow: hidden; padding-left: 0px !important;/*RW 2px */ width: 35px !important;/*RW 30px */ position: relative; font-size: 11px; text-align: center; border: 0px; height: 31px; margin: 0px; } .add-to-cart-button:hover .icon { background: url("http://sofit.miximages.com/css/add_to_cart-over.gif") 50% 50% no-repeat !important; display: block; border: none; } 
 

Ho questa soluzione che funziona su Chrome e anche su Firefox. Perché non provare a utilizzare FontAwesome invece di creare quell’icona del carrello come immagine. Puoi vedere il mio JS Fiddle per la demo. Spero che questo ti aiuti. Felice codifica.

CSS:

 button{ width: 100px; height: 100px; color: #000; } button:hover{ color: red; } 

Puoi anche mettere il tuo hover CSS personalizzato sul button:hover