Mostrar div al poner el cursor

[IDRID]

Código:

$(document).ready(function(){
jQuery(".bio").hide();

    $('.player').mouseover(function() {   
        $(this).next(".bio").show();
    });

});

La libreria jquery ya esta.

Código HTML:

<div class="popit-hover player">
<img src=".png" alt="Snake">
<span style="font-size:18px;" class="crikey-squat">Snake</span>
<div class="bio">
<div class="br-solid"></div>
<div style="margin: 2px 20px;" class="bio-content">
Texto.
</div>
</div>
</div> 

La consola de errores no me muestra ningun error, no se muestra el div, pero se oculta el contenido.

Gracias.

[PercevalCiro]

Iniciado por IDRID

Código:

$(document).ready(function(){
jQuery(".bio").hide();

    $('.player').mouseover(function() {   
        $(this).next(".bio").show();
    });

});

La libreria jquery ya esta.

Código HTML:

<div class="popit-hover player">
<img src=".png" alt="Snake">
<span style="font-size:18px;" class="crikey-squat">Snake</span>
<div class="bio">
<div class="br-solid"></div>
<div style="margin: 2px 20px;" class="bio-content">
Texto.
</div>
</div>
</div> 

La consola de errores no me muestra ningun error, no se muestra el div, pero se oculta el contenido.

Gracias.

Yo utilizaria children en vez de next. Pero porque no llamarlo directo?.... asi funcionaria:

Código Javascript:

$(document).ready(function(){
jQuery(".bio").hide();
 
    $('.player').mouseover(function() {   
        $(this).children(".bio").show();
    });
 
});
 

Pero tambien podria ser:

Código Javascript:

$(document).ready(function(){
jQuery(".bio").hide();
 
    $('.player').mouseover(function() {   
        $(".bio").show();
    });
 
});
 

[IDRID]

Gracias, no puedo hacerlo directamente porque tengo mas de uno, he probado children, funciona pero se vuelve loco xDD

Código:

$(document).ready(function(){
jQuery(".bio").hide();

    $('.player').mouseover(function() {   
        $(this).children(".bio").slideDown(300);
    });

    $('.player').mouseoout(function() {   
        $(this).children(".bio").slideUp(300);
    });

});

[PercevalCiro]

Y logicamente, si tienes mas de uno lo que interpreta JavaScript es que quieres realizar esa accion sobre una clase en particular. y no sobre un objeto unico, no se que intentas realizar pero o debes utilizar ID y no class para lo objetos y quiza seria conveniente utilizar la ejecucion del script sobre otro objeto y no sobre uno solo.

Fijate en los ejemplos de Jquery UI que tienen los menu que se desplazas cuando tocas en la cabecera pero del objeto no de todos, a menos que quieras desplazar todos.