css - 该功能仅适用于 Chrome，不适用于 Firefox。如何在 Firefox 中替换？

Question

我在我的网站上添加了一个悬浮板，它可以翻转以显示更多文本。它仅适用于 Chrome。在 Firefox 中，它使整个框在悬停时变为灰色。我如何让它在 Chrome 中工作而在 Firefox 中什么也不做？

我拿它的地方是：

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

我的网站是：

（已移除）- 将鼠标悬停在“按可用性排序产品”以查看我所指的内容。

谢谢！！

Answer 1

复制并粘贴所有这些属性-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-适用于 chrome/safari 和-moz-Firefox

Answer 2

使用 Firefox 特定的前缀并用常规类覆盖 :hover 类。像这样：

@-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%; 
} 

}

请记住将其放在 CSS 的底部，以便通过级联覆盖之前的规则。这里的工作示例。