Geek Answers Handbook

CSS3 transition / freeze does not work in Firefox; Firefox error?

I am trying to create a “mouse” effect that moves the top layer to the left and opens the bottom layer with CSS3. The code works in Chrome, but not in Firefox ... did I do something stupid again? Thank you for your help!

Edit: I must have done something wrong, because even if I do not leave the transition code, nothing happens when I put layers in Firefox ... :(

Code:

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

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; }
+4
source share
2 answers

Turns out there is a bug in Firefox ( hoverfox 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 bug fixed or not ...

+4
source

Take a look at this question: Why is my CSS3 transition not working in Firefox?

+2
source

More articles:


All Articles