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

mar_x4_superxv · #1 (**permalink**) 21/07/2011, 23:07

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 :).

Naahuel · #2 (**permalink**) 22/07/2011, 09:11

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <style type="text/css">
    .afuera, .adentro{padding:10px; border:2px solid black;}
    #oculto{display:none; margin:0; background:yellow; padding:5px;}
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        //para el ejemplo 1
        $('#ejemplo1 .afuera').mouseover(function(){
          $('#oculto').slideDown('fast');
        }).mouseout(function(){
            $('#oculto').slideUp('fast');
         });
         
         //para el ejemplo 2
        $('#ejemplo2 .afuera').mouseenter(function(){
          $('#oculto').slideDown('fast');
        }).mouseleave(function(){
            $('#oculto').slideUp('fast');
        });
    });
    </script>
  </head>
  <body>
    <h2>
      Ejemplo 1 <em>Con .mouseover y .mouseout</em>
    </h2>
    <div id="ejemplo1">
      <div class="afuera">
        Fuera
        <div class="adentro">
          Dentro
        </div>
      </div>
    </div>
    <h2>
      Ejemplo 2 <em>Con .mouseenter y .mouseleave</em>
    </h2>
    <div id="ejemplo2">
      <div class="afuera">
        Fuera
        <div class="adentro">
          Dentro
        </div>
      </div>
    </div>
    <p id="oculto">
      Estoy oculto.
    </p>
  </body>
</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.

mar_x4_superxv · #3 (**permalink**) 22/07/2011, 15:57

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?

mar_x4_superxv · #4 (**permalink**) 22/07/2011, 16:17

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

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

Saludos ;)