마우스 오버시 숨겨진 이미지 표시

Question

매핑 된 이미지에 호버 효과를 적용 할 때 문제가 있습니다. 매핑 된 영역이있는 이미지가 있고 그 모두에 마우스를 올려 놓으면 다른 이미지를 표시하려고합니다.

당신은 지금까지 여기에 내 작품을 볼 수 있습니다

: 나는 이미지를 보여 영역 위로 마우스를 가져하지만 난 커서를 이동할 때 (그 지역을 떠나지 않을 때)

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

문제는 그것이 점멸 시작 . 그것은 픽셀 단위로 공간을 필요로합니다.

자바 스크립트 :

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 태그에 값이 "없음"을 제공하지 않으며 당신이 그것을 필요로 작동 "포인터 이벤트"라는 CSS 속성이 있습니다. 이 설명서입니다 https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

문제는 항상 브라우저의 호환성이 될 것입니다.

Answer 2

왜 그냥 jQuery를 내부 hover()를 사용

나는 자바 스크립트와 jQuery를 해결 작업을 시도했습니다? 또한 500 밀리 초 시간 초과 후에 왜 이벤트를 묶는 지 확신 할 수 없습니까?

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

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