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