jQuery 및 mouseover 이벤트

Question

이 문제를 해결하는 방법을 알아야합니다. 내 목록에 mouseleave 이벤트가 있습니다.

jQuery(".list").live("mouseleave", function(event) { 

    alert("Boom"); 

}); 

동시에 도구 설명이 표시됩니다. 이 툴팁은이 목록에 속하지 않으며, 다른 div에 있습니다.

이제 div에 마우스를 올려 놓으면 경고 메시지가 나타납니다. 목록을 남겼습니다.

제발,이 툴팁에서 마우스를 움직일 때 어떻게 할 수 있는지 말해주세요. 아무런 조치도 취하지 않을 것입니다.

나는이 문장을 시도했지만, 그것은 작동하지 않습니다

if($(event.target).hasClass('name')) alert("D"); 

Answer 1

는

당신은 mouseleave 이벤트에서 relatedTarget 속성을 사용할 수 있습니다, 이것은의 객체를 포함 당시 마우스가 끝난 요소는입니다.이벤트 발생 :

jQuery('.list').bind('mouseleave', function(event) { 
    if(jQuery(event.relatedTarget).attr('id') != 'yourToolTipId') { 
    alert("Boom"); 
    } 
}); 

Answer 2

은 기본적으로 당신은 작은 시간 제한 이벤트 핸들러를 실행하고 마우스가 도구 설명을 입력하면 취소해야합니다. 다음과 같은 방법으로 달성 할 수 있습니다 :

var timeout; 붉은 광장이 목록이며, 파란색 사각형이 툴팁입니다이 예에서 http://jsfiddle.net/SVzv5/8/

: 여기

handler = function() { 
    // handler 
}; 

jQuery('.list').bind('mouseout', function (event) { 
    timeout = setTimeout(handler, 250); 
}); 

jQuery('#tooltipId').bind('mouseover', function (event) { 
    clearTimeout(timeout); 
}); 

Answer 3

는 작동 문제에 대한 솔루션입니다. jsfiddle에서 그들과 상호 작용하여 작업하는 것을보십시오.

HTML 코드 :

<div id="under"></div> 
<div id="over"></div> 

jQuery 코드는 :

는

$('#under').bind('mouseover', function() { 
    $(this).css({background:'yellow'}); 
}).bind('mouseout', function() { 
    $(this).css({background:'red'}); 
}); 

는 CSS 코드 :

#under { 
    position:absolute; 
    width:200px; 
    height:200px; 
    top:0; 
    left:0; 
    background:red; 
    display:block; 
    cursor:pointer; 
} 
#over { 
    position:absolute; 
    width:200px; 
    height:200px; 
    top:100px; 
    left:100px; 
    background:blue; 
    display:block; 
    pointer-events: none; 
}