Foros del Web » Programando para Internet » Javascript » Frameworks JS »

onmouseover y onmouseout sobre div con imagenes y texto - problemas en IE

Estas en el tema de onmouseover y onmouseout sobre div con imagenes y texto - problemas en IE en el foro de Frameworks JS en Foros del Web. Hola gente. Tengo 2 divs. Al hacer mouseover sobre uno de los divs el otro aparece deslizandose. Funciona perfecto en todos los navegadores menos en ...
  #1 (permalink)  
Antiguo 21/07/2011, 23:07
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 41
Antigüedad: 9 años, 4 meses
Puntos: 2
De acuerdo onmouseover y onmouseout sobre div con imagenes y texto - problemas en IE

Hola gente.

Tengo 2 divs. Al hacer mouseover sobre uno de los divs el otro aparece deslizandose. Funciona perfecto en todos los navegadores menos en ie, que novedad no?jaja
Bueno el problema es que el div oculto que se desplaza tiene imagenes y texto en su interior e IE me toma como que lo que esta dentro del div (estos textos e imagenes) en realidad se encuetra afuera dado que cada ves que apoyo el puntero sobre estos me ejecuta el mouseout cuando en realidad no tendria que hacer nada. El tema es que en ff y demas funciona de 10 pero en ie......Pense en eliminar el evento mouseout cuando apoyo el cursor sobre el contenido de este div, pero despues tambien hay que volver a crearlo ..es muy engorrosa esa solucion, quizas alguien me pueda ayudar con algun hack o lo que tengan a mano :).
  #2 (permalink)  
Antiguo 22/07/2011, 09:11
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 9 años, 7 meses
Puntos: 192
Respuesta: onmouseover y onmouseout sobre div con imagenes y texto - problemas en IE

Eso es un problema que no sólo debería ocurrir en IE. No es un bug, está bien que haga eso. Tu problema es algo que llaman "event bubbling".

Para solucionarlo, en lugar de .mouseover() y .mouseout() usá .mouseenter() y .mouseleave(). Mirá este ejemplo:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
  6.     <style type="text/css">
  7.     .afuera, .adentro{padding:10px; border:2px solid black;}
  8.     #oculto{display:none; margin:0; background:yellow; padding:5px;}
  9.     </style>
  10.    
  11.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  12.     <script type="text/javascript">
  13.     $(function(){
  14.         //para el ejemplo 1
  15.         $('#ejemplo1 .afuera').mouseover(function(){
  16.           $('#oculto').slideDown('fast');
  17.         }).mouseout(function(){
  18.             $('#oculto').slideUp('fast');
  19.          });
  20.          
  21.          //para el ejemplo 2
  22.         $('#ejemplo2 .afuera').mouseenter(function(){
  23.           $('#oculto').slideDown('fast');
  24.         }).mouseleave(function(){
  25.             $('#oculto').slideUp('fast');
  26.         });
  27.     });
  28.     </script>
  29.   </head>
  30.   <body>
  31.     <h2>
  32.       Ejemplo 1 <em>Con .mouseover y .mouseout</em>
  33.     </h2>
  34.     <div id="ejemplo1">
  35.       <div class="afuera">
  36.         Fuera
  37.         <div class="adentro">
  38.           Dentro
  39.         </div>
  40.       </div>
  41.     </div>
  42.     <h2>
  43.       Ejemplo 2 <em>Con .mouseenter y .mouseleave</em>
  44.     </h2>
  45.     <div id="ejemplo2">
  46.       <div class="afuera">
  47.         Fuera
  48.         <div class="adentro">
  49.           Dentro
  50.         </div>
  51.       </div>
  52.     </div>
  53.     <p id="oculto">
  54.       Estoy oculto.
  55.     </p>
  56.   </body>
  57. </html>

Si probás el ejemplo 1, vas a ver que el elemento oculto se muestra y oculta si pasas al div interior. Pero no sucede eso en el ejemplo 2.
El ejemplo debería comportarse igual en cualquier navegador.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 22/07/2011, 15:57
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 41
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: onmouseover y onmouseout sobre div con imagenes y texto - problemas en IE

hola nahuel ya habrian probado esa alternativa y me habia dado buenos resultados en todos los navegadores menos en IE aunque como bien me dijistes es un problema que no solo debería ocurrir en IE y gracias por la informacion.
Yo en realidad me manejo con mootools mas que todo aunque ahora intente implementar jquery e hise exactamente lo mismo usando el script que me pasastes y funciona jamon jamon (de maravilla), por los resultados y el esfuerzo que tuve que hacer voy a empesar a usar este fram mas seguido :).
Lo que si estuve buscando como hacer el mismo efecto pero horizontalmente que es lo que necesito. Probe usando "slideLeft" y "slideRight" pero no hay caso.
¿Como seria?
  #4 (permalink)  
Antiguo 22/07/2011, 16:17
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 41
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: onmouseover y onmouseout sobre div con imagenes y texto - problemas en IE

Encontre la solucion usando $('#oculto').animate({width:'toggle'},350);

Gracias por la ayuda nahuel me sirvio tu post claro y muy bien explicado.

Saludos ;)

Etiquetas: javascript, mootools
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 03:05.