如何隱藏/顯示依賴2個不同元素的元素

Question

我有一個非常棘手的UI用例，我似乎無法弄清楚。

我有2個divs是不是嵌套在一起（這很重要，因爲嵌套可以很容易地解決它）。

這是div的結構：

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

這是他們看起來像設計：

------- 
|  | 
| 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 

我試着用$ 4。對（）事件（鼠標懸停在做， mouseover B，mouseout A，mouseout B）。並無法解決它。當然這是一個複雜節點結構的簡化示例：A & B包含更多元素並且不是兄弟。

Answer 1

這是因爲a的mouseleave事件在鼠標輸入前被觸發b因此鼠標從未有機會輸入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

---