4

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; 
}
Petr Vostrel
  • 2,324
  • 16
  • 23
nubicurio
  • 165
  • 1
  • 2
  • 15
  • Given that this seems to depend on the exact ajax stuff you're doing, just showing the CSS isn't really enough information to answer the question. Point to the whole page? – Boris Zbarsky Jun 11 '11 at 05:13
  • I just found out that it actually has nothing to do with Ajax; even as a standalone page, the CSS transition, or even a simple ".over:hover" does not work in Firefox at all...:( – nubicurio Jun 17 '11 at 10:14
  • which FF version? it's working for me FF4 – clairesuzy Jun 17 '11 at 10:28
  • @nibicurio :hover works fine in Firefox in general... is your page in quirks mode or something? – Boris Zbarsky Jun 17 '11 at 17:41
  • Hmm I was using FF4, and if it was just a simply :hover selector it did work just fine, but it didn't work when it was inside two layers of classes...I solved the problem though; see my post below. – nubicurio Jun 23 '11 at 15:03

2 Answers2

4

Turns out there is a bug in Firefox (firefox hover opacity) and I solved the problem by changing

.layers:hover .over {}

to

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

I just upgraded to Firefox 5 (from Firefox 4); not sure if the bug has been fixed or not...

Community
  • 1
  • 1
nubicurio
  • 165
  • 1
  • 2
  • 15
2

See this question: Why is my CSS3 Transition not working in Firefox?

Community
  • 1
  • 1
rg88
  • 20,742
  • 18
  • 76
  • 110
  • I don't quite understand what he's saying though...would you mind clarifying that for me? "It looks like FF wont transition default values. They have to be declared on the original element before it will transition to the new properties." – nubicurio Jun 10 '11 at 17:20
  • 1
    this means the explicit `left: 0;` should be declared on the original `.over` div, rather than leaving it at default, which you have done so I think this is possibly not the cause in this case – clairesuzy Jun 17 '11 at 10:30