Problema con efecto hover

[Siroguh]

Hola. Tengo un problema. Tengo dos divs metidos en otro div, el de la izquierda esta semioculto a la izquierda con overflow:hidden en la caja contenedora. Quiero que al hacer "hover" en el div de la izquierda, este se des-oculte hacia la derecha y desplaze al div de la derecha hacia la derecha, quedando el div de la derecha semioculto.



este es mi html:

Código HTML:

<div id="izqder">



		<div id="izq">
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
	  </div>


	  <div id="der">
		<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
		</div>




	</div>	
  
	

y este mi css:

Código HTML:

#izqder{
	width:98%;
	height:300px;
	border:10px solid #333;
	border-radius:20px;
	margin-bottom:40px;
	padding:10px;
	overflow:hidden;
}


#izq{
	width:33%;
	height:99%;
	border:1px solid #333;
	display:inline-block;
	left:-20%;
	position:relative;
	z-index:5;
	-moz-transition:all 1s ease-in-out;
	    clear:both;
}


#izq:hover{
	left:0%;
}

#der{
	width:65%;
	height:99%;
	border:1px solid #333;
	display:inline-block;
    position:relative;
    float:right;
    clear:both;
    
}

Diganme como hacerlo

[Siroguh]

Por favor, responder. Es bastante urgente.

[ArturoGallegos]

estaba apunto de darte el código preciso para realizar lo que pides pero al ver eso de "es bastante urgente" me desanima y valgame

si es urgente pase a la sección de empleo y pague por el trabajo de lo contrario busque en san google "Selectores avanzados CSS"

Pd. aquí no se pide nada con carácter de urgente, no hacemos el trabajo por usted y si es urgente pague por el trabajo

[Siroguh]

Tampoco hace falta ser así. Es mi primera pregunta...

[ArturoGallegos]

jeje ok tal vez exagere un poco, pero no olvide pasar a leer las políticas del foro y en vista que es carácter urgente pase de inmediato a san google a buscar lo que le dije.

ente todos los selectores encontrara ">" búsquelo y estúdielo

[kseso?]

@Siroguh
Pónganos algo del código que ha hecho (o alguna idea sacada de lo que haya leído tras la sugerencia de Ag666) y le pongo un par de selectores de dos posibles maneras de enfocar la solucción.

@Ag666 añada el "+" y "~" a la investigación (y el padre:hover hijo // padre:hover hijo1:hover // padre:hover hijo2) ;)

[noruas]

A ver si te sirve. He modificado un poco el css... Pero creo que funciona bien.

Código:

#izqder {
	width:98%;
	height:300px;
	border:10px solid #333;
	border-radius:20px;
	margin-bottom:40px;
	padding:10px;
	overflow:hidden;
}
#izq {
	width:33%;
	height:99%;
	border:1px solid #333;
	display:inline-block;
	margin-left: -20%;
	float: left;
	-moz-transition:all 1s ease-in-out;

}
#izq:hover {
	margin-left: 0%;
}
#der {
	width:65%;
	height:99%;
	border:1px solid #333;
	float:left;
        margin-left: 1%;
}

[Siroguh]

Ok.Gracias noruas, era justo lo que pedia. Ya me he pasado a ver el selector ">". Estoy en proceso de investigación. Aun así, no te entiendo, kseso?, que quieres decir con:

"@Ag666 añada el "+" y "~" a la investigación (y el padre:hover hijo // padre:hover hijo1:hover // padre:hover hijo2) ;)"

¿me lo podrías explicar? , ¿o entra dentro de el selector ">"?

[Siroguh]

Perdon, rectifico. Tengo un problema. Esta bien que al hacer hover en el de la izquierda, el de la derecha se mueva, pero quiero que se mueva aun mas a la derecha (el div de la derecha), quedando una parte del div de la derecha oculta. Si no me entienden, pregunten, que lo vuelvo a explicar.

[kseso?]

@Siroguh
Son selectores.
+ de hermano adyacente: http://www.sidar.org/recur/desdi/tra...cent-selectors

~ de hermano (aunque no sea adyacente) http://www.w3.org/TR/selectors/#gene...ng-combinators

el resto (lo que está entre paréntesis) sólo es una sugerencia de algún selector.

Pruebe a jugar con lo siguiente:

Código CSS:

#izqder:hover > div {
/* sus estilos */
}
 
#izqder:hover #izq:hover {
/* sus estilos */
}
 
#izqder:hover #izq:hover + #der {
/* sus estilos */
}
 

Por separado y juntos.

[EDIT]
Como verá, el afán de algunos no es resolverle su problema, sino que lo haga usted y por el camino aprenda. Con independencia del tiempo que le lleve y del esfuerzo que le suponga.
[/EDIT]

[Siroguh]

Ok. Gracias kseso?, probaré con lo que me has dicho. Ya diré que tal va. Sigo investigando los selectores avanzados, hasta ahora no los había necesitado.

[Siroguh]

Bueno, pues aqui está el código final. Me hace algún extraño si le quiero meter la propiedad "transition". Si veo que queda MUY mal la quitare y ya.


os pongo el css, el html es igual:

Código HTML:

#izqder {
	width:98%;
	height:300px;
	border:10px solid #333;
	border-radius:20px;
	margin-bottom:40px;
	padding:10px;
	overflow:hidden;
}

#izq {
	width:25%;
	height:92.5%;
	border:1px solid #333;
	display:inline-block;
	margin-left: -20%;
	float: left;
	-moz-transition:all 1s ease-in-out;
	padding:11px;

}
#der {
	width:65%;
	height:99.8%;
	border:1px solid #333;
	float:left;
    margin-left: 10%;
    -moz-transition:all 1s ease-in-out;
}


#izq:hover{
	margin-left:0px;
}


#izqder:hover #izq:hover + #der{
   margin-left: 320px;
   margin-top:-302px;
   }

[kseso?]

@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:

<!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">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
 
<style type="text/css">
#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;
}
</style>
</head>
<body> 
  <div id="padre">
    <div class="izq"></div>
    <div class="drch"></div>
  </body>
</html>
 

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).

[Siroguh]

Muchas gracias por toda la ayuda, de todos. Veo que este es realmente un buen foro con mucha participación. En cuanto aprenda más participaré e intentaré resolver dudas de los demás. A, y gracias por las recomendaciones, kseso?.