CSS3转换/悬停效果在Firefox中不工作;一个Firefox错误？ [英] CSS3 transition/hover effect not working in Firefox; a Firefox bug?
问题描述
我试图创建一个鼠标悬停效果，将顶层向左滑动，并使用CSS3显示底层。该代码在Chrome中工作，但不是在Firefox ...我做了一些蠢事了吗？感谢您的帮助！
I'm trying to create a mouse-over effect that slides the top layer to the left and reveal the bottom layer using CSS3. The code works in Chrome but not in Firefox...did I do something stupid again? Thanks for your help!
编辑：我必须做错事，因为即使我没有转换代码，当我将鼠标悬停在Firefox的layers ...：（
I must have done something wrong, because even if I leave out the transition code, nothing happens when I hover over "layers" in 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;
}
推荐答案
在Firefox中（ firefox hover opacity ），我通过更改
Turns out there is a bug in Firefox (firefox hover opacity) and I solved the problem by changing
.layers:hover .over {}
到
[class="layers"]:hover over {}
我刚升级到Firefox 5（来自Firefox 4）;不确定错误是否已经修复...
I just upgraded to Firefox 5 (from Firefox 4); not sure if the bug has been fixed or not...
这篇关于CSS3转换/悬停效果在Firefox中不工作;一个Firefox错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
