Question

I added a hoverboard on my site that flips over to reveal more text. It only works with Chrome. In Firefox, it makes the entire box turn gray on hover. How do I have it work in Chrome and do nothing in Firefox?

The place I took it from is:

http://cssdeck.com/item/122/hoverboard-3d

My site is:

(removed) – hover over “Sort Products By Availability” to see what I’m referring to.

Thanks!!

Answer 1

Use a Firefox specific prefix and overwrite the :hover classes with the regular classes. Like this:

@-moz-document url-prefix() {
#hover-flip:hover p  {
     background: #fff;
     color: #009EE0;
     margin: -40px 0 0 0;
     position: relative; 
}
#hover-flip:hover {
     border-top: 1px solid #DDD;
     bottom: 0;
     color: #df3e7b;
     font-size: 14px;
     line-height: 40px;
     position: absolute;
     width: 100%; 
} 

}

Remember to place this at the bottom of your css, so it overwrites the previous rules by cascading. Working example here.