Показать скрытое изображение на mouseover

Question

У меня проблема при попытке добиться эффекта зависания при отображении изображения. У меня есть изображение с отображаемыми областями, и на всех из них я хочу показать другое изображение при наведении курсора.

Вы можете увидеть мою работу до сих пор здесь:

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

Проблема заключается в том, когда я наведите курсор мыши на области он показывает изображение, но при перемещении курсора (не выходя область) он начинает мелькать , Он занимает площадь в пикселях по пикселям.

Я пробовал работать с Javascript и 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

Существует CSS-свойство, называемое «указатель-событием», которое не дает значение «нет» к Img тегам, которые перекрывают друг друг в преобразованном изображении и работает, как вам нужно. Это документация https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Проблема всегда будет совместимостью браузеров.

Answer 2

Почему бы просто не использовать hover() внутри JQuery? Я также не знаю, почему вы связываете события после таймаута в 500 миллисекунд?

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

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