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的底部，因此它会通过级联覆盖以前的规则。工作示例here。

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

2 个答案: