firefox - CSS3 过渡/悬停效果在 Firefox 中不起作用; Firefox 错误?

标签 firefox css css-transitions

我正在尝试使用 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/

相关文章:

html - Firefox 上的错误 : checkbox hidding when i'm scrolling

javascript - 单击 div 外部的按钮时更改 div 内容,但在单击之前将其中一个内容设置为可见

css - 纯 CSS 书籍封面在延迟后页面加载时翻转

firefox - Mozilla Addon-SDK 的存储选项

firefox - 如何注入(inject)位于/皮肤上的CSS?

html - Firefox 打印表在第二页

javascript - 将淡出添加到此动画

css - 仅使用 CSS 淡出后隐藏元素

css - 为缩放圆圈动画添加边框

javascript - Mozilla Firefox 中未触发事件回调