CSS3 过渡/悬停效果在 Firefox 中不起作用；火狐浏览器的错误？

发布于 2024-11-14 15:58:13 字数 875 浏览 3 评论 0原文

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

原文

I'm trying to create a mouse-over effect that slides the top layer to the left and reveal the bottom layer using CSS3. The code works in Chrome but not in Firefox...did I do something stupid again? Thanks for your help!

Edit: I must have done something wrong, because even if I leave out the transition code, nothing happens when I hover over "layers" in Firefox...:(

The code:

<html>
  <div class="layers">
    <div class="over">content</div>
    <div class="under">content</div>
  </div>
</html>

The style:

.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; 
}

分享到QQ

分享到微博