[Ayuda] Aparecer box al hacer hover en algun link u objeto

Hola a todos

Tengo un foro MyBB, pero he visto en los foros IPB un efecto que al pasar el mouse sobre el nick de un usuario aparece un cuadro o box con los datos del usuario.

Imagen de la caja de post:


Al pasar el mouse sobre el nick de usuario (Aparecerá el cuadro):


Dentro de la caja, puede se hacer clic en "Buscar contenido" y "PM este miembro 'y otras opciones.

¿Cómo se llama ese tipo de efecto?

Yo intente con CSS3: profilelink:hover +. userdatabox {...} De esta manera logre que al pasar el mouse sobre el nick apareciera un box, pero este desaparecía al dejar de hacer hover en el nick para poder clickear alguna de las opciones del box que aparecia

Por favor, me podrían ayudar hacerlo, talvés se podría en javaScript o cualquier otra cosa. He intentado con unos lightbox de imagenes pero en vez de imagenes he puesto contenido pero solo aparece si se hace clic en el link, mas no haciendo hover.

Usted puede probar el efecto que usan los foros IPB haciendo clic
NOTA: Una vez hecho un hover en el nick de algun usuario aparece el box, y se mantiene activo solo si el mouse esta dentro de ese box, y desaparece si el mouse esta fuera del box.
http://www.skinbox.net/community/topic/4918-meet-my-community/page__pid__20189#entry20189 :

Y pues el lightbox que podria ser una alternativa para conseguir el efecto encontre esto:
http://www.1stwebmagazine.com/create-css-popup-with-lightbox-effect
que en vez de imagen se le podria agregar contenido, pero hay que hacer clic para que aparezca y lo que necesito es que aparezca pero haciendo hover y que se matnenga activo si el mouse esta dentro del box.

debes usar mouseover sobre el link y mouseout sobre el div que aparece

Me ayudarias a generar un codigo simple?

veamos, tienes dos divs:

Código HTML :

<div id="foo">foo</div>
<div id="hiddenFoo">Hola soy foo</div>

...le agregamos algo de estilo

Código CSS :

#foo{background: #999; padding: 10px; width: 100px;}
#hiddenFoo{background: #FC0; padding: 20px; height: 300px; width: 200px;}

ahora con jquery, primero "escondemos" el div "flotante", luego declaras la funcion mouseover en #foo para mostrar #hiddenFoo, luego sobre este ultimo un mouseout para ocultarlo:

Código Javascript :

$(document).ready(function()
{
   $('#hiddenFoo').hide();
   //
   $('#foo').mouseover(function()
   {
      $('#hiddenFoo').fadeIn(300);
   });
   $('#hiddenFoo').mouseout(function()
   {
      $(this).fadeOut(300);
   }); 
});

Aqui puedes ver el código funcionando

Gracias penHolder, funciona de maravilla. Solo tengo una duda
porque cuando agrego otros divs en el segundo no funciona el efecto.
Asi
http://jsfiddle.net/6bvwG/2/

No funciona por que la funcion aplica al ID #HiddenFoo, por norma no debe haber más de un elemento con el mismo ID.

hagamos unos pequeños cambios:

Código HTML :

<div class="foo">foo</div>
<div class="hiddenFoo">Hola soy foo</div>

cambiamos los estilos de ejemplo:

Código CSS :

.foo{background: #999; padding: 10px; width: 100px;}
.hiddenFoo{background: #FC0; padding: 20px; height: 50px; width: 200px; float:left;
position:absolute; border: 1px solid red;}

y cambiamos el script:

Código Javascript :

$(document).ready(function()
{
   $('.hiddenFoo').hide();
   //
   $('.foo').mouseover(function()
   {
      $(this).next($('.hiddenFoo')).fadeIn(300);
   });
   $('.foo').mouseout(function()
   {
      $(this).next($('.hiddenFoo')).fadeOut(300);
   });
    
});

y ya está

A ok, es por eso que usó next($
Todo va quedando de maravilla

[/url]
Pero ahora el problema es que cuando dejo de hacer hover en foo desparece hidennFoo

Sin embargo en el primer ejemplo que me dio, osea este [url=http://jsfiddle.net/penholder/6bvwG/] Alli si funcionaba bien.

Me siento un poco apenado por ser tan cargoso, disculpeme.

Cambia el objeto del mouseout y quitale la funcion next()

Código Javascript :

$(document).ready(function()
{
   $('.hiddenFoo').hide();
   //
   $('.foo').mouseover(function()
   {
      $(this).next($('.hiddenFoo')).fadeIn(300);
   });
   $('.hiddenFoo').mouseout(function()
   {
      $(this).fadeOut(300);
   });
    
});

Muchas gracias, ahora si funciona tal y como lo deseaba

Tengo una duda,
Cual es la diferencia entre
Mouseover/Mouseout con Mouseenter/Mouseleaver

He leído en algunos foros donde recomiendan usar el segundo y pues el resultado viene a ser lo mismo, pero como veo que tu sabes de esto, quisiera que me dieras una opinión.

http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.htm