マウスオーバーで隠し画像を表示

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

マップ画像にオーバーラップするのimgタグに値「none」を与えないと、あなたがそれを必要として働く「ポインタイベント」と呼ばれるCSSプロパティがあります。これはドキュメントですhttps://developer.mozilla.org/en/docs/Web/CSS/pointer-events

問題は常にブラウザの互換性になります。

Answer 2

理由だけではなく、jQueryののhover()内部を使わないのでしょうか？また、500ミリ秒のタイムアウト後にイベントをバインドする理由も不明です。

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

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