Estoy tratando de crear un efecto de mouse-over quedesliza la capa superior hacia la izquierda y muestra la capa inferior con CSS3. El código funciona en Chrome pero no en Firefox ... ¿Hice algo estúpido otra vez? ¡Gracias por tu ayuda!
Edit: Debo haber hecho algo mal, porque incluso si omito el código de transición, no pasa nada cuando paso el cursor sobre "capas" en Firefox ... :(
El código:
<html>
<div class="layers">
<div class="over">content</div>
<div class="under">content</div>
</div>
</html>
El estilo:
.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;
}
Respuestas
4 para la respuesta № 1Resulta que hay un error en Firefox (opacidad de flotar en firefox) y resolví el problema cambiando
.layers:hover .over {}
a
[class="layers"]:hover over {}
Acabo de actualizar a Firefox 5 (de Firefox 4); No estoy seguro si el error ha sido arreglado o no ...
2 para la respuesta № 2
Ver esta pregunta: ¿Por qué mi transición CSS3 no funciona en Firefox?