divから特定の距離離れたところでdivを非表示にする

Question

ナビゲーションバーの項目で切り替えるページにdivがあります。私がしたいのは、ユーザーのマウスがdivの外側境界から一定の距離を離れるときにdivを非表示にすることです。 、メガメニューが滑り落ちる際に、ユーザーのマウスを置いたのli＃トリガオーバー

<ul> 
    <li>This is link A</li> 
    <li>This is link C</li> 
    <li id="trigger">This is link D</li> 
</ul> 

<div id="megaMenu">This is where the menu content goes</div> 

：だから、ここで

は、いくつかのサンプルコードです。私がしたいのは、ユーザーのマウスがdivの範囲外の50ピクセルのときに#megaMenuをスライドさせることです。助言がありますか？？

$(document).ready(function() { 

    $('li#locations a').hover(function() { 
     $('#locationsSuperNav').slideDown(); 
    }); 

    $('.superNavClose').hover(function() { 
     $('#locationsSuperNav').slideUp('fast').removeClass("open"); 
    }); 

}); 

コード（.superNavClose）の第二の部分は、ユーザーのマウスがそれに当たると、それを閉じるために、メニュー周りのホットスポットを置くの試みだった：

は、ここで私が使用していたコアjQueryのです。メガメニューの中にはたくさんのリンクがありますので、ユーザーが作業中に開いておく必要があります。私はマウスが特定の距離離れているときにdivを閉じるとかなりうまくいくと思っていた。事前に感謝の意を表します！

Answer 1

あなたは、なぜあなたはmegaMenu周りのパディングを使用していないでしょうホバー機能から

$(document).ready(function(){ 

    $('li#locations a').hover(function(){ 
     $('#locationsSuperNav').slideDown(); 
     }, function(){ 
      $('#locationsSuperNav').slideUp('fast').removeClass("open"); 
     }); 

});