Afficher l'image masquée au survol de la souris

Question

J'ai un problème lorsque j'essaie d'obtenir un effet de survol sur une image mappée. J'ai une image avec des zones cartographiées et sur chacun d'eux, je veux montrer une image différente en vol stationnaire.

Vous pouvez voir mon travail jusqu'à présent ici:

http://mantasmilka.com/map/pries-smurta.html

Le problème est quand je passe la souris sur la zone, il montre l'image, mais quand je déplace le curseur (ne pas quitter la zone), il commence vacillante . Il faut un espace pixel par pixel.

J'ai essayé de travailler avec Javascript et solutions jQuery:

Javascript:

mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';" 

jQuery:

$('.hide').hide(); 
setTimeout(function(){ 
    $("#area-kaunas").mouseenter(function(){ 
     $('#Kaunas').show(); 
    }); 
    $("#area-kaunas").mouseleave(function(){ 
     $('#Kaunas').hide(); 
    }); 
}, 500); 

Answer 1

Il y a une propriété appelée css « pointer-événement » qui donne la valeur « none » aux balises img qui se chevauchent dans l'image cartographiée et fonctionne comme vous le souhaitez. Ceci est la documentation https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Le problème sera toujours la compatibilité des navigateurs.

Answer 2

Pourquoi ne pas utiliser hover() l'intérieur de jQuery? Je ne sais pas non plus pourquoi vous liez les événements après un délai de 500 millisecondes?

$('.hide').hide(); 

$("#area-kaunas").hover(function() { 
    $('#Kaunas').show(); 
}, function() { 
    $('#Kaunas').hide(); 
});