Versteckte Bild bei Mouseover anzeigen

Question

Ich habe ein Problem beim Versuch, Hover-Effekt auf zugeordnetes Bild zu erreichen. Ich habe ein Bild mit kartierten Bereichen und auf allen möchte ich ein anderes Bild zeigen, wenn ich schwebe.

Sie können meine Arbeit so weit hier sehen:

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

Das Problem ist, wenn ich den Mauszeiger über Bereich zeigen sie das Bild, aber wenn ich den Cursor (nicht verlassen den Bereich) verschiebe es beginnt Flackern . Es nimmt Fläche Pixel für Pixel.

Ich habe versucht, mit Javascript und jQuery Lösungen arbeiten:

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

Es gibt eine CSS-Eigenschaft „Pointer-Ereignis“ bezeichnet, die den Wert „none“ zu den img-Tags, die in dem abgebildeten Bild überlappen gibt und arbeitet, wie Sie es brauchen. Dies ist die Dokumentation https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Das Problem wird immer die Kompatibilität von Browsern sein.

Answer 2

Warum hover() einfach nicht innerhalb von jQuery verwenden? Ich bin mir auch nicht sicher, warum Sie die Ereignisse nach 500 Millisekunden Timeout binden?

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

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