我正在尝试创建一个鼠标悬停效果,将顶层向左滑动并使用 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;
}