쉼표를 가져 오는 스크립트가 겹쳐져있는 경우, 절대적으로 배치 된 요소 위로 마우스를 가져 가면

Question

호버 위에 툴팁을 트리거하는 요소가 있습니다. 문제는 툴팁이 요소와 겹치기 때문에 툴팁 위에 마우스를 올리면 실제로 요소 밖으로 마우스가 이동한다는 것입니다. 그런 다음 마우스를 트리거로 올리거나 내릴 때 계속해서 툴팁이 페이드 인/페이드 아웃되는 상황이 발생합니다. 어떻게 든 스크립트를 일시 중지해야하므로 툴팁 위로 마우스를 가져 가면 두 번째 부분 (mouseleave)이 실행되지 않습니다.

키커는 다음과 같습니다. 트리거 요소는 이미지 맵의 영역이므로 도구 설명은 자식 요소가 아니며 자식 요소가 될 수 없습니다. mousenter()를 사용하여 간단하게 감싸기를 호출 할 수 없습니다. 전체 이미지는 핫스팟으로 덮여 있으므로 마우스가 해당 영역에서 툴팁 위로 이동하여 다른 영역으로 이동하면 첫 번째 툴팁이 사라지고 새 툴팁이 사라집니다.

나는 그것이 이벤트 버블 링과 관련이 있다는 것을 알고 있지만, 전체 주제가 내게 깊은 신비 속에 흐려져 있으며, 나는 간단한 해결책을 기대하고있다. 후 (당신이 볼 수 있듯이

$("area").hover(function() { 
     var i = $(this).attr("href").split("#"); 
     var i = "." + i[1]; 

     $(".tooltip").removeClass("glue"); 
     $(i).fadeIn(); 
    }, function() { 
     var i = $(this).attr("href").split("#"); 
     var i = "." + i[1]; 

     $(i).hover(function() { 
     $(this).addClass("glue"); 
     }, function() { 
     $(this).removeClass("glue"); 
     }); 

     setTimeout(function() { $(".tooltip:not(.glue)").fadeOut(); }, 200); 
    }); 

, 나는 몇 가지 클래스를 전환 시도했다 :

HTML :

<img src="image.png" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area shape="poly" coords="x,y,z,w" href="#tt01" /> 
    <area shape="poly" coords="a,b,c,d" href="#tt02" /> 
</map> 

<div class="tooltip tt01"></div> 
<div class="tooltip tt02"></div> 

JS 여기

는 어떤 임의의 코드 파스타입니다 사용자 정의 속성을 토글 링해도 작동하지 않음). 이 방법은 작동하지만 한 영역에서 다른 영역으로 툴팁을 이동하거나 툴팁에서 영역으로 이동 한 후 새로운 영역으로 이동하면 재미있는 일이 발생합니다.

Answer 1

난과 이야기 클라이언트, 모바일 장치에서도 작업하고 싶었 기 때문에 내가 한 일은 t o 대신 클릭시 트리거합니다. 훨씬 더 간단합니다. 마우스가 움직이는 곳을 걱정할 필요가 없습니다.

Answer 2

편집 : 툴팁이 커서를 따라 확인하고 절대적 위치 :

HTML :

<img src="image.png" usemap="#Map" /> 
    <map name="Map" id="Map"> 
     <area shape="poly" coords="x,y,z,w" alt="text for this area" /> 
    </map> 

    <div class="tooltip"></div> 

JS :

$('area').hover(function(){ 
    $('.tooltip').fadeIn('fast').html('Hovering over : ' + $(this).attr('alt')); 
},function(){ 
    $('.tooltip').hide().html(''); 
}); 

$(document).bind('mousemove', function(e){ 
    $('.tooltip').css({ 
     left: e.pageX + 20, 
     top: e.pageY 
    }); 
}); 

데모 : http://jsfiddle.net/AlienWebguy/h8AYF/