CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？答案

【问题标题】：CSS3 transition/hover effect not working in Firefox; a Firefox bug?CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？
【发布时间】：2011-09-12 16:10:32
【问题描述】：

我正在尝试创建一个鼠标悬停效果，将顶层向左滑动并使用 CSS3 显示底层。该代码在 Chrome 中有效，但在 Firefox 中无效……我又做了一些愚蠢的事情吗？感谢您的帮助！

编辑：我一定做错了什么，因为即使我省略了转换代码，当我将鼠标悬停在 Firefox 中的“图层”上时也没有任何反应...:(

代码：

<html>
  <div class="layers">
    <div class="over">content</div>
    <div class="under">content</div>
  </div>
</html>

风格：

.layers {
  position: relative;   
  width: 200px;
  height: 50px;
  overflow: hidden;
}   

.over {
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}   
.under {
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
}           

.layers:hover .over {
  left: -200px; 
}

【问题讨论】：

鉴于这似乎取决于您正在执行的确切 ajax 内容，仅显示 CSS 并不足以回答问题。指向整个页面？
我才发现其实跟Ajax没有关系；即使作为一个独立的页面，CSS 过渡，甚至是一个简单的“.over:hover”在 Firefox 中根本不起作用......:(
哪个FF版本？它对我有用 FF4
@nibicurio :hover 通常在 Firefox 中可以正常工作...您的页面是在怪癖模式还是什么？
嗯，我使用的是 FF4，如果它只是一个简单的 :hover 选择器，它确实工作得很好，但是当它在两层类中时它不起作用......我解决了虽然有问题；请参阅下面的帖子。

标签： firefox css css-transitions

【解决方案1】：

看到这个问题：Why is my CSS3 Transition not working in Firefox?

【讨论】：

我不太明白他在说什么……你介意为我澄清一下吗？ “看起来 FF 不会转换默认值。它们必须在原始元素上声明，然后才能转换到新属性。”
这意味着显式 left: 0; 应该在原始 .over div 上声明，而不是默认设置，你已经这样做了，所以我认为这可能不是这种情况下的原因

【解决方案2】：

原来在 Firefox (firefox hover opacity) 中有一个错误，我通过更改解决了这个问题

.layers:hover .over {}

到

[class="layers"]:hover over {}

我刚刚升级到 Firefox 5（从 Firefox 4）；不知道这个bug是否已经修复...

【讨论】：