CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？
Posted
技术标签:
【中文标题】CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？【英文标题】：CSS3 transition/hover effect not working in Firefox; a Firefox bug? 【发布时间】：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 选择器，它确实工作得很好，但是当它在两层类中时它不起作用......我解决了虽然有问题；请参阅下面的帖子。 【参考方案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是否已经修复...
【讨论】：
以上是关于CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？的主要内容，如果未能解决你的问题，请参考以下文章