Heredar eventos a elementos hijos

[kriss8725]

Buenas tardes, tengo el siguiente problema, tengo un div llamado "tranparente", dentro del cual tiene otro div llamado texto y este div texto contiene parrafos y links, el div texto esta oculto y se muestra hasta que me posiciono sobre el div transparente, hasta ahi todo bien el problema biene cuando el mouse se posiciona sobre el div texto o algun otro elemento ya sea un parrafo o un link el div texto se oculta porque ya no esta sobre el div transparente, como puedo lograr que el evento onmouseover se herede a los elementos que contiene el div transparente.

Código Javascript:

$("#transparente").mouseover(function () {
                $("#texto").show("slide");
                
            });
 
            $("#transparente").mouseout(function (event) {
                $("#texto").hide("slide");
                
            });
 

Código HTML:

<div id="transparente">
    <div id="texto">
        <p>prueba de texto</p>
        <a href="#">Link</a>
    </div>
</div>
 

Espero me halla dado a entender saludos y gracias de antemano.

[alexg88]

Hola,

Puede usar los eventos mouseenter y mouseleave en vez de mouseover y mouseout.

Código Javascript:

$("#transparente").mouseenter(function () {
                $("#texto").stop().show("slide");
                
            });
 
            $("#transparente").mouseleave(function (event) {
                $("#texto").stop().hide("slide");
                
            });
 

El método stop es para parar la animación y que no se concatenen varias animaciones si sales y entras muy rápido del elemento.


También puedes usar el evento hover, que enmascara ambos eventos: http://api.jquery.com/hover/

Puedes leer la documentación oficial de jquery para ver la diferencia entre los eventos.

http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/

Saludos.

[kriss8725]

Muchas gracias alexg88 si me sirvio de esa forma ahora el problema es que el div texto (mide 50px de ancho) hago que aparesca con el fecto .show("slide") entonces el problema biene cuando me posiciono sobre div transparente (mide 100px de ancho) y aun no aparece por completo el div texto el evento no se hereda al div texto, si me posiciono sobre el div transparente y espero a que aparesca todo el div texto no hay ningun problema. Como podria solucionar eso.

Código Javascript:

$("#transparente").mouseenter(function () {
                $(".cs-title").stop(false, true).show("slide");
            });
 
            $("#transparente").mouseleave(function (event) {
                $(".cs-title").stop(false, true).hide("slide");
            });
 

[alexg88]

No entiendo el problema, ¿puedes poner un ejemplo en vivo? Puedes usar esta página:

http://jsfiddle.net/alexg88/2Mqjh/

Un saludo.