jQuery mouseover link para mostrar div oculto

Encontré el evento mouseover en el sitio extratorrent como la siguiente imagen.jQuery mouseover link para mostrar div oculto

alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg

Al pasar el ratón sobre el enlace de nombre de usuario, se muestra un div oculto. Bastante limpio y resbaladizo.

Soy nuevo en jQuery. ¿Alguien me puede mostrar cómo empezar por el camino correcto para hacer eso? Gracias.

Actualización 1:

me escribió algo como el siguiente intento de obtener el resultado. El problema es que cuando saco el mouse con el mouse, el Div no se queda, desaparece inmediatamente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() 
     { 


    $("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); }); 
    $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); }); 


     }); 
     </script> 

    </head> 

    <body> 

    <a id="show_div" href="#">Link text</a> 
    <div id="hello" style="visibility:hidden;"> 
     <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
    </div> 


    </body> 
    </html>

¿Qué hacer para que Div permanezca visible cuando pasa el mouse sobre la div?

Fuente

2010-06-26 Narazana

Al pasar el mouse sobre el texto del enlace, establece Visiblility del div "hello" a visible. Luego, al pasar el cursor sobre el div "hola", también configura la visibilidad div "hola" como visible. En el mouseout del div "hola", establece su visibilidad en "oculto". Algo como esto:

$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); }); 
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); }); 
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });

Fuente

2010-06-26 08:04:14

Entonces, toma 3 pasos ... Gracias. – Narazana

Necesitaba implementar algo como esto y agregué un mouseout a #show_div. $ ("# show_div"). Mouseout (función() {$ ("# hello"). Demora ("rápido"). Css ('visibilidad', 'oculto');}); La idea era que los elementos de la lista deberían desaparecer después de un retraso, pero esto no funciona. Si elimino la demora, los elementos de la lista desaparecen tan pronto como el mouse se aleja del enlace. Con la demora en, los elementos de la lista nunca desaparecen. ¿Alguna idea de por qué? ¡¡¡Gracias!!! – AggieMan

Analicé esto un poco más y resulta que para que funcione, necesito hacer: $ ("# show_div"). Mouseout (function() {setTimeout (function() {$ (" #hello "). css ('visibilidad', 'oculto');}, 200);}); – AggieMan

usted podría utilizar la función .hover:

$(function() { 
    $('#divOne').hover(function() { 
     $('#divTwo').show(); 
    }, function() { 
     $('#divTwo').hide(); 
    }); 
});

donde tienes los dos divs:

<div id="divOne">div one</div> 
<div id="divTwo" style="display: none;">div two</div>

ACTUALIZACIÓN:

Como se mencionó en la sección de comentarios de la segunda div desaparecerá si el mouse sale del primero. Hay many plugins out there que le permiten lograr el comportamiento deseado. This one se ve particularmente bien.

Fuente

2010-06-26 07:30:52

El problema es que si el usuario mueve el mouse en el 'divTwo' recientemente mostrado, desaparecerá de debajo de ellos cuando el mouse deje' divOne'. No es un UX ideal. –

@ T.J. Crowder, muy buen comentario. –

La votación negativa parece grave ... –

Con un simple HTML:

<div class="div1">Hover me</div> 
<div class="div2" style="display: none">Hi, there</div>

al pasar sobre div1 mostrar div2, y esconderlo sólo después de que el usuario consigue su interior y luego la salida:

<script type="text/javascript"> 
$('.div1').hover(function() {$('.div2').show()}); 
$('.div2').hover(function() {}, function() {$('.div2').hide()});  
</script>

Esta es una manera rápida, solución no óptima, pero funcionará incluso si los dos div no son adyacentes.

Fuente

2010-06-26 07:48:07 Iacopo

utilizar este

$ (document) .en ("clic", "# test-elemento", function() {});

Fuente

2015-08-19 14:30:53

jQuery mouseover link para mostrar div oculto

Respuesta

Cuestiones relacionadas