4

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

2 回答 2

4

原来 Firefox 中有一个错误(firefox hover opacity),我通过更改解决了这个问题

.layers:hover .over {}

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

我刚刚升级到 Firefox 5(从 Firefox 4);不知道错误是否已修复...

于 2011-06-23T14:55:10.263 回答
2

看到这个问题:为什么我的 CSS3 转换在 Firefox 中不起作用?

于 2011-06-10T17:17:37.080 回答