Geek Answers Handbook

Span: hover does not work in Firefox, but works in Chrome

I have a piece of code in which I do not work in Firefox. The .icon image .icon not change when the button freezes. It works fine 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/

+5
source share
2 answers

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

You can simplify your CSS by adding :hover to button :

 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>
+5
source

I have this solution that works on chrome as well as on firefox. Why not try FontAwesome instead of making the trash can icon as an image. You can see my JS Fiddle for a demo. Hope this helps. Happy coding.

CSS

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

You can also put your custom CSS hover on button:hover

0
source

More articles: