Question

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

Answer 1

原来Firefox中存在一个错误（firefox hover opacity），我通过更改

来解决问题

.layers:hover .over {}

到

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

我刚刚升级到Firefox 5（来自Firefox 4）;不确定错误是否已修复......

Answer 2

请参阅此问题：Why is my CSS3 Transition not working in Firefox?

CSS3过渡/悬停效果在Firefox中不起作用;一个Firefox bug？

2 个答案: