mouseenter /하는 MouseLeave <strong>mouseenter</strong>/<strong>하는 MouseLeave</strong>있어서 마우스의 좌표가 목표의 클라이언트 사각형 진입하지에만 트리거 것이 아니라 다른 구성 요소를 밝히기 또는 대상을 포함 할 때 보이는 요소

Question

취재 무시. 이것은 내 mouseenter 콜백에서 다른 요소 E를 대상 위에 표시하려고하기 때문에 문제가됩니다. 나는 또한 E가 사라 지길 바란다 mouseleave. 이것을 겹치는 툴팁으로 생각할 수 있습니다.

그러나 대상에 마우스를 올려 놓으면 마우스 센터이 실행되며 요소 E가이를 처리합니다. 이 범위는 마우스가 이벤트를 트리거하므로 E가 사라집니다. 이것은 더 mouseenter 이벤트를 트리거하므로 E가 다시 나타납니다 ..... 어느 것이 두통입니다.

그래서 기본적으로, 나는 mouseenter/ 타겟 만 적용 여부에 관계없이, 마우스가 들어가거나 대상의 클라이언트 사각형 잎 여부를 걱정하는 MouseLeave의 버전이 있는지 궁금.

업데이트 : @arunopjohny가이 문제를 설명하기 위해 JS 피들을 만들었습니다. 의견

Answer 1

관련 질문에 대한 조회 결과 완벽한 솔루션 : Ignore mouse interaction on overlay image

은 "포인터 이벤트 : 없음;" 속성은 요소의 마우스 이벤트를 비활성화합니다. 더 중요한 것은, 이벤트가 대신에 그 아래 요소에 "통과"합니다. 내 질문에 오버레이 요소 E를 사용하여 문제를 해결합니다.

Answer 2

는 시도를 참조하십시오

jQuery(function ($) { 
    $('#target').hover(function() { 
     var $target = $(this); 
     clearTimeout($target.data('hoverTimer')); 
     $('#e').show(); 
    }, function() { 
     var $target = $(this); 
     var timer = setTimeout(function() { 
      $('#e').hide(); 
     }, 200); 
     $target.data('hoverTimer', timer); 
    }); 

    $('#e').hover(function() { 
     clearTimeout($('#target').data('hoverTimer')); 
    }, function() { 
     $(this).hide(); 
    }); 
}); 

데모 : Fiddle