span:hover isn't working in Firefox but works in Chrome

Question

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.

相关标签:

Answer 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>

Answer 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