2 개의 다른 요소에 의존하는 요소를 숨기거나 표시하는 방법

Question

매우 까다로운 UI 사용 사례가 있습니다. 알아낼 수없는 경우가 있습니다.

아니요이 서로 중첩 된 두 개의 div가 있습니다 (중첩이 쉽게 해결 했으므로 중요합니다). 나는 4 $ CSTE 연구진() 이벤트 (마우스 오버 A를 함께 할 노력

------- 
|  | 
| A | 
|  | 
------- 
B is hidden by default 

------------- 
|  |  | 
| A | B | 
|  |  | 
------------- 
Roll over on A shows B. Rolling over on B or A still shows B 

------- 
|  | 
| A | 
|  | 
------- 
Rolling out outside of A & B will hide B 

:

<div class="a"></div> 
<div class="b"></div> 

이 그들이 디자인처럼 보이는 방법입니다

이 div의 구조입니다 mouseover B, mouseout A, mouseout B). 그것을 해결할 수 없었습니다. 물론 이것은 복잡한 노드 구조에 대한 단순화 된 예입니다 : & B는 더 많은 요소를 포함하고 있으며 형제가 아닙니다.

Answer 1

마우스가 b을 입력하기 전에 a의 mouseleave 이벤트가 발생하기 때문에 마우스는 b을 입력 할 기회가 결코 생기지 않습니다.

는 시도

jQuery(function ($) { 
    var $target = $('.b'), 
     timer; 
    $('.a').hover(function() { 
     clearTimeout(timer); 
     $target.stop(true, true).slideDown(500); 
    }, function() { 
     timer = setTimeout(function() { 
      $target.stop(true, true).slideUp(); 
     }, 200); 
    }); 

    $target.hover(function() { 
     clearTimeout(timer); 
    }, function() { 
     $(this).stop(true, true).slideUp(); 
    }); 
}); 

데모 : Fiddle

---