Tema: onmouseover y onmouseout sobre div con imagenes y texto - problemas en IE
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 22/07/2011, 09:11
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 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