Foros del Web » Programando para Internet » Jquery »

jQuery: Problemas con hover/mouseenter/mouseleave en IE8

Estas en el tema de jQuery: Problemas con hover/mouseenter/mouseleave en IE8 en el foro de Jquery en Foros del Web. Hola a todos, tengo un problema importante (importante porque por desgracia IE8 sigue teniendo un porcentaje de uso como para no ignorarlo). El caso es ...
  #1 (permalink)  
Antiguo 13/05/2012, 13:58
 
Fecha de Ingreso: mayo-2012
Ubicación: Valencia
Mensajes: 3
Antigüedad: 7 años, 6 meses
Puntos: 0
Pregunta jQuery: Problemas con hover/mouseenter/mouseleave en IE8

Hola a todos,

tengo un problema importante (importante porque por desgracia IE8 sigue teniendo un porcentaje de uso como para no ignorarlo).

El caso es que he creado un mapamundi mediante un mapa HTML de forma que cuando paso el ratón sobre un continente, este se destaca, al igual que cuando lo abandono, vuelve a su estado original. Podéis verlo vosotros mismos aquí:

http://www.sonia-sa.com/distribuidores

El mapa, tal cual lo querían, a base de puntos. Lo que hice fue crear el mapa para controlar los eventos por medio de jQuery y su función hover(), que luego cambié por mouseenter/mouseleave por si así se solucionaba, pero seguía obteniendo el mismo resultado. Luego por medio de posicionamiento absoluto, coloqué png's de 8 bits (los de 24 bits se mostraban fatal en IE8) para cada continente, justo encima de donde coincide con la imagen del mapa. Estos png's están hechos a base de los puntos del continente resaltados en verde y el resto un fondo transparente. Inicialmente están ocultos, y al pasar por encima del área de un continente, se muestra su png correspondiente.

Si hacéis la prueba en IE8 (o IE9 con retrocompatibilidad) veréis que el resaltado no permanece fijo, sino que parpadea.

Podéis ayudarme a solucionarlo?

Este es el código javascript implicado (podéis verlo en la misma página HTML embebido, línea 472):

Código PHP:
var imgTag;

$(
document).ready(function() {

   
imgTag = $('#mapamundi img');

   $(
'#mapamundi .area').each(function() {

        $(
this).mouseenter(

            function() {

                var 
region = $('#mapamundi a#region-' + $(this).attr('id'));

                if (
region.hasClass('oculto')) {

                    $(
'#mapamundi a').hide('fast', function() {

                        $(
this).addClass('oculto'); 

                    });

                    $(
'#mapamundi a#region-' + $(this).attr('id')).fadeIn('fast', function() {

                       $(
this).removeClass('oculto'); 

                    });

                }

            }).
mouseleave(           

            function() {

                var 
region = $('#mapamundi a#region-' + $(this).attr('id'));

                if (! 
region.hasClass('oculto')) {

                    
region.fadeOut('fast', function() {

                        $(
this).addClass('oculto'); 

                    });   

                }

            }

       );

   });

}); 

Además de esto, otro problema menor, pero que afecta a todos los navegadores. Cuando abandono un continente para entrar en otro, el anterior se desactiva bien siempre, pero a veces no pasa cuando abandono un área del mapa hacia una zona de la imagen donde no hay área activa asignada. Lo medio arreglé asignando la desactivación de todos los continentes a cuando abandono la imagen, pero me gustaría que funcionase siempre y cuando abandone el área activa.

Espero vuestras respuestas. Un saludo!
  #2 (permalink)  
Antiguo 13/05/2012, 14:11
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 11 años, 4 meses
Puntos: 1532
Respuesta: jQuery: Problemas con hover/mouseenter/mouseleave en IE8

En realidad el hover de jQuery usa dichos eventos, intenta cancelar el comportamiento por defecto con event.preventDefault() y si no funciona asegúrate de que el navegador no este en modo quirks
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 13/05/2012, 17:33
 
Fecha de Ingreso: mayo-2012
Ubicación: Valencia
Mensajes: 3
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: jQuery: Problemas con hover/mouseenter/mouseleave en IE8

Hola maycolalvarez, dónde hago para capturar el evento y aplicarle preventDefault()?

Gracias.
  #4 (permalink)  
Antiguo 13/05/2012, 21:03
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 11 años, 4 meses
Puntos: 1532
Respuesta: jQuery: Problemas con hover/mouseenter/mouseleave en IE8

Coloca event cómo primer parámetro de la función anónima que controla el evento, es decir el callback
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #5 (permalink)  
Antiguo 14/05/2012, 11:58
 
Fecha de Ingreso: mayo-2012
Ubicación: Valencia
Mensajes: 3
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: jQuery: Problemas con hover/mouseenter/mouseleave en IE8

Al final lo he solucionado, pero no con preventDefault(), sino con stopPropagation()
Lo que no me explico es por qué en versiones actuales el evento no se propaga y en IE8- sí lo hace y por eso hay que impedir la propagación.

Pero bueno, tu solución me llevó a la pista buena. Muchas gracias!
  #6 (permalink)  
Antiguo 15/05/2012, 13:53
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 11 años, 4 meses
Puntos: 1532
Respuesta: jQuery: Problemas con hover/mouseenter/mouseleave en IE8

gracias a ti, al fin me encuentro un uso practico de stopPropagation
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Etiquetas: hover, ie8, mouseenter, mouseleave, parpadeo
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 12:06.