Feature only works in Chrome, but not Firefox. How do I replace in Firefox?

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

Answers


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.


Copy and Paste all these properties starting with -moz-

-webkit-font-smoothing: antialiased;
-webkit-transform-origin: top;
-webkit-transition: all .2s ease-in-out;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

-webkit- is for chrome/safari and -moz- is for Firefox


Need Your Help

Faster Evaluating IF Condition of JavaScript

javascript performance if-statement

Back to the basics of JavaScript. This is a question I am coming with is based on computation time speed of JavaScript If condition.

timeout errors from Tomcat talking to MongoDB in Azure

java mongodb tomcat azure

My system is a TomCat 7 server running on Ubuntu talking to a MongoDB cluster running in CentOS. We have this on AWS and it is working just fine.