@Siroguh
Se lo ha ganado.
Ha sabido cambiar su actitud inicial y seguir las sugerencias.
Así que lo justo es que si era eso lo que le pedíamos al inicio mi actitud también cambie.
Pruebe lo siguiente:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> <meta http-equiv=Content-Type content="text/html; charset=utf-8">
#padre {
position: relative;
width: 600px;
height: 300px;
margin: 2em auto;
overflow: hidden;
border: 1px solid #444;
}
.izq, .drch {
background: #F5F5F5;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
position: absolute;
height: 280px;
top: 10px;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
-ms-transition: 1s;
transition: 1s;
}
.izq {
left: -150px;
width: 250px;
background: #F5F5F5;
}
.drch {
left: 150px;
width: 400px;
background: #F3F3A1;
}
.izq:hover {
left: 10px;
background: #F3F3A1;
}
.izq:hover + .drch {
left: 450px;
background: #F5F5F5;
}
Es sólo un ejemplo. No es su caso.
Mire los códigos utilizados y cualquier cuestión la pregunta.
Y recuerde: 1 cambio y prueba. Si funciona adelante con el siguiente. Si falla: undo.
N.B. respecto a su html de #1:
debería cerrar sus hr. La nomenclatura sería: <hr /> (sin entrar en qué doctype utilice).