span: hover non funziona in Firefox ma funziona in Chrome

Question

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://client4.bostonwebco.com/skin/ideal_responsive/images/custom/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://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart-over.gif") 50% 50% no-repeat !important; 
 
    display: block; 
 
    border: none; 
 
}

<div class="buttons-row"> 
 
    <button class="button main-button add-to-cart-button" type="submit" title="Add to cart"> 
 
    <span class="button-right"> 
 
     <span class="button-left"> 
 
     <span class="lbl" id="lbl_add_to_cart" onmouseover="javascript: lmo(this, event);">Add to cart</span> 
 
     <span class="icon"></span> 
 
     </span> 
 
    </span> 
 
    </button> 
 
</div>

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

Answer 1

Ho questa soluzione che funziona su Chrome e anche su Firefox. Perché non provare a utilizzare FontAwesome invece di rendere 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; 
} 

Inoltre si può mettere il hover CSS personalizzato su button:hover

Answer 2

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

È possibile semplificare il vostro CSS attaccando :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://client4.bostonwebco.com/skin/ideal_responsive/images/custom/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://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart-over.gif") 50% 50% no-repeat !important; 
 
    display: block; 
 
    border: none; 
 
}

<div class="buttons-row"> 
 
    <button class="button main-button add-to-cart-button" type="submit" title="Add to cart"> 
 
    <span class="button-right"> 
 
     <span class="button-left"> 
 
     <span class="lbl" id="lbl_add_to_cart">Add to cart</span> 
 
     <span class="icon"></span> 
 
     </span> 
 
    </span> 
 
    </button> 
 
</div>