Html span:hover不是'；在Firefox中不工作，但在Chrome中工作

我有一段代码在Firefox中无法使用。当按钮悬停时，

。图标

图像不会改变。它在铬合金中工作得非常好

button.add-to-cart-button.button left.icon{
显示：块；
位置：绝对位置；
左：0；/*RW 6px*/
顶部：0；/*RW 6px*/
宽度：35px；/*RW 21px*/
高度：31px；/*RW 19px*/
背景：url(http://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart.gif)50%50%不重复；
}
按钮。添加到购物车按钮。按钮左侧{
显示：块；
文本缩进：-5000px；
溢出：隐藏；
左侧填充：0px！重要；/*RW 2px*/
宽度：35px！重要；/*RW 30px*/
位置：相对位置；
字体大小：11px；
文本对齐：居中；
边界：0px；
高度：31px；
边际：0px；
}
按钮。添加到购物车按钮：悬停范围。按钮左侧：悬停范围。图标：悬停{
背景：url（“http://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart-over.gif）50%50%不重复！重要；
显示：块；
边界：无；
}

添加到购物车

我有这个解决方案，可以在chrome和firefox上使用。为什么不尝试使用，而不是将购物车图标作为图像。你可以看到我的演示。希望这有帮助。快乐编码

CSS:

---

您还可以将自定义悬停CSS置于

按钮：hover

您的问题是，如果元素是

按钮的子元素，Firefox不会响应该元素的
：hover
选择器。看

您可以通过将
：hover
附加到
按钮来简化CSS：


button.add-to-cart-button.button left.icon{
显示：块；
位置：绝对位置；
左：0；/*RW 6px*/
顶部：0；/*RW 6px*/
宽度：35px；/*RW 21px*/
高度：31px；/*RW 19px*/
背景：url(http://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart.gif)50%50%不重复；
}
按钮。添加到购物车按钮。按钮左侧{
显示：块；
文本缩进：-5000px；
溢出：隐藏；
左侧填充：0px！重要；/*RW 2px*/
宽度：35px！重要；/*RW 30px*/
位置：相对位置；
字体大小：11px；
文本对齐：居中；
边界：0px；
高度：31px；
边际：0px；
}
.添加到购物车按钮：悬停.图标{
背景：url（“http://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart-over.gif）50%50%不重复！重要；
显示：块；
边界：无；
}

添加到购物车
与您的问题无关，但您不需要事件处理程序上的
javascript:
前缀。。。它会起作用，但不是必需的。该前缀用于在
属性中使用javascript时
button{
   width: 100px;
    height: 100px;
    color: #000;
}

button:hover{
    color: red;
}