[SOLUCIONADO] ayudaa mismo id (#) con diferentes valores

[IsraelPina]

Primero que nada les dejo mis codigos para referencia:

CSS:

Código:

#descripcion{
	position: absolute;
	background: gray;
	width: 260px;
	height: 138px;
	text-align: justify;
	margin-top: 167px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
}

#recorrer{
	margin-right: 10px;
	top: 20px;
	position: absolute;
	background-color: white;
}

HTML:

Código HTML:

<div id="descripcion">
	<div id="recorrer">

		<!-- aqui va un texto traigo de php (contenido dinamico) -->

	</div>
</div> 

JQuery:

Código:

$(document).ready(function($){

	$('#recorrer').mouseenter(function(){
		var holis = $("#recorrer").height();
		holis = ((-holis)+138);
		if (holis<0){
			var juan = ((-holis)/8);
			$("#recorrer:hover").css({"top":holis});
			$("#recorrer").css({"transition":"top "+(juan)+"s","-webkit-transition":"top "+(juan)+"s"});
		}
	});

	$('#recorrer').mouseleave(function(){
		$("#recorrer").css({"transition":"top 1s","-webkit-transition":"top 1s"});
		$("#recorrer").css({"top":"20px"});
	});

});

Resulta que mando a traer datos de MySql mediante PHP lo cual me genera 6 entradas (publicaciones) las cuales obviamente tiene diferente contenido (unos mas grandes que otros), por lo cual el id recorrer tiene diferente valores, al momento de mostrar el contenido se mira muy bien pero el problema es al momento de ejecutar los eventos JQuery solo se ejecuta en la primera entrada, en los demas ignora completamente el JQuery.

Un ejemplo de una pagina de la cual se me dio la idea, si se dan cuenta cada entrada tiene este recorrido, en mi caso solo lo hace la primera
LINK: http://www.deviantart.com/literature/

Anticipadamente muchas gracias por su ayuda y espero sus respuestas como dudas.

Saludos Israel Pina desde Hermosillo, Sonora, Mexico

[ArturoGallegos]

no entiendo muy bien el problema pero supongo que se solventaría si en lugar de usar un ID utilizas una clase CSS para dicho efecto.

[IsraelPina]

Hola que tal aqui compartiendo la solucion que encontre, el problema era que estaba utlizando mal los selectores, no se mucho sobre eso pero solucione mi problema con esto

Resulta que el JQuery solo actuaba sobre el primer selector que encontraba con id "recorrer" por lo tanto en los demas no funcionada, lo que hice fue modificar el css y el codigo JQuery, los 2 en pequeños detallitos, les dejo el codigo y espero ayudar a alguien con mi solucion. Igual gracias por pasar por aqui, igual estoy por si alguien tiene alguna duda,

CSS:

Código:

#recorrer:only-child{
	margin-right: 10px;
	top: 20px;
	position: absolute;
	color: white;

}

JQuery:

Código:

$(document).ready(function($){

	$('#recorrer:only-child').mouseenter(function(){
		var holis = $(this).height();
		holis = ((-holis)+138);
		if (holis<0){
			var juan = ((-holis)/8);
			$("#recorrer:hover").css({"top":holis});
			$(this).css({"transition":"top "+(juan)+"s","-webkit-transition":"top "+(juan)+"s"});
		}
	});

	$('#recorrer:only-child').mouseleave(function(){
		$(this).css({"transition":"top 1s","-webkit-transition":"top 1s"});
		$(this).css({"top":"20px"});
	});

});

Saludos desde Hermosillo a todos los entusiastas web!, espero ayudarlos publicando mi solucion y aqui andare por si algo...