2015-05-18 51 views
5

我有一段代码,我不适用于Firefox。当按钮悬停时,.icon图像不会更改。它在Chrome中完美运行。范围:悬停不适用于Firefox,但适用于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小提琴:http://jsfiddle.net/dKcdK/14/

+1

无关,与你的问题,但你并不需要'的JavaScript:'前缀的事件处理程序...它会工作,但没有必要。该前缀用于在属性 – freefaller

回答

0

我有这样的解决方案,对铬也在Firefox的作​​品。为什么不尝试使用FontAwesome而不是将该购物车图标作为图像。你可以看到我的JS Fiddle的演示。希望这可以帮助。快乐编码。

CSS:

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

button:hover{ 
    color: red; 
} 

您也可以把您的自定义悬停CSS上button:hover

5

你的问题是,如果它是一个button的孩子Firefox不给:hover选择元素的响应。见https://bugzilla.mozilla.org/show_bug.cgi?id=843003

您可以通过附加:hoverbutton,而不是简化你的CSS:

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>

+0

内使用javascript时谢谢!有用。 –

相关问题