我正在尝试使用 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;
}
最佳答案
原来 Firefox 中有一个错误 (firefox hover opacity),我通过更改解决了这个问题
.layers:hover .over {}
到
[class="layers"]:hover over {}
我刚刚升级到 Firefox 5(从 Firefox 4);不确定错误是否已修复...
关于firefox - CSS3 过渡/悬停效果在 Firefox 中不起作用; Firefox 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6309691/