span:hover isn't working in Firefox but works

问题:

I have a piece of code that I doesn't work in Firefox. The .icon image does not change when the button is hovered. It works perfectly 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/

回答1:

Your issue is that Firefox does not respond to the :hover selector of an element if it is a child of a button. See https://bugzilla.mozilla.org/show_bug.cgi?id=843003.

You can simplify your CSS by attaching :hover to the button instead:

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>

回答2:

I have this solution that works on chrome and also on firefox. Why not try using FontAwesome instead of making that cart icon as image. You can see my JS Fiddle for demo. Hope this helps. Happy Coding.

CSS:

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

button:hover{
    color: red;
}

Also you can put your custom hover CSS on button:hover