jQuery: Problemas con hover/mouseenter/mouseleave en IE8 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!
