span: hover Firefox'ta çalışmıyor ama Chrome'da çalışıyor

Question

Firefox'ta çalışmayan bir kod parçam var. Düğme beklerken .icon görüntüsü değişmiyor. Chrome'da mükemmel çalışır.

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

ben krom ve ayrıca ateş üzerinde çalışan bu çözümü var. Neden bu sepet simgesini resim olarak yapmak yerine FontAwesome kullanmayı deneyin. Demo için JS Fiddle'umu görebilirsiniz. Bu yardımcı olur umarım. Mutlu Kodlama.

CSS: Bir button bir çocuk ise Firefox bir elementin :hover selektör yanıt olmamasıdır

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

button:hover{ 
    color: red; 
} 

Ayrıca button:hover

Answer 2

Kişisel konuda özel vurgulu CSS koyabilirsiniz . Bakınız https://bugzilla.mozilla.org/show_bug.cgi?id=843003.

yerine button için :hover takılarak CSS kolaylaştırabilirsiniz: Sorunuza ile ilgisi

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>