Foros del Web » Programando para Internet » Jquery »

Heredar eventos a elementos hijos

Estas en el tema de Heredar eventos a elementos hijos en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/06/2013, 14:10
 
Fecha de Ingreso: mayo-2009
Mensajes: 242
Antigüedad: 10 años, 7 meses
Puntos: 2
Heredar eventos a elementos hijos

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:
Ver original
  1. $("#transparente").mouseover(function () {
  2.                 $("#texto").show("slide");
  3.                
  4.             });
  5.  
  6.             $("#transparente").mouseout(function (event) {
  7.                 $("#texto").hide("slide");
  8.                
  9.             });

Código HTML:
Ver original
  1. <div id="transparente">
  2.     <div id="texto">
  3.         <p>prueba de texto</p>
  4.         <a href="#">Link</a>
  5.     </div>
  6. </div>

Espero me halla dado a entender saludos y gracias de antemano.
  #2 (permalink)  
Antiguo 26/06/2013, 15:24
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 8 años, 7 meses
Puntos: 344
Respuesta: Heredar eventos a elementos hijos

Hola,

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

Código Javascript:
Ver original
  1. $("#transparente").mouseenter(function () {
  2.                 $("#texto").stop().show("slide");
  3.                
  4.             });
  5.  
  6.             $("#transparente").mouseleave(function (event) {
  7.                 $("#texto").stop().hide("slide");
  8.                
  9.             });

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.
  #3 (permalink)  
Antiguo 26/06/2013, 15:57
 
Fecha de Ingreso: mayo-2009
Mensajes: 242
Antigüedad: 10 años, 7 meses
Puntos: 2
Pregunta Respuesta: Heredar eventos a elementos hijos

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:
Ver original
  1. $("#transparente").mouseenter(function () {
  2.                 $(".cs-title").stop(false, true).show("slide");
  3.             });
  4.  
  5.             $("#transparente").mouseleave(function (event) {
  6.                 $(".cs-title").stop(false, true).hide("slide");
  7.             });
  #4 (permalink)  
Antiguo 26/06/2013, 16:04
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 8 años, 7 meses
Puntos: 344
Respuesta: Heredar eventos a elementos hijos

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

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

Un saludo.

Etiquetas: elementos, eventos, heredar, hijos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:19.