span: di chuột không hoạt động trong Firefox nhưng hoạt động trong Chrome

Question

Tôi có một đoạn mã mà tôi không hoạt động trong Firefox. Hình ảnh .icon không thay đổi khi nút được di chuột. Nó hoạt động hoàn hảo trong 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

Tôi có giải pháp này hoạt động trên chrome và cũng trên firefox. Tại sao không thử sử dụng FontAwesome thay vì làm biểu tượng giỏ hàng đó làm hình ảnh. Bạn có thể xem JS Fiddle của mình để giới thiệu. Hi vọng điêu nay co ich. Happy Coding.

CSS:

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

button:hover{ 
    color: red; 
} 

Ngoài ra bạn có thể đặt hover CSS tùy chỉnh của bạn trên button:hover

Answer 2

vấn đề của bạn là Firefox không đáp ứng với các :hover chọn của một nguyên tố nếu nó là con của một button . Xem https://bugzilla.mozilla.org/show_bug.cgi?id=843003.

Bạn có thể đơn giản hóa CSS của bạn bằng cách gắn :hover đến button thay vì:

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>