ネストされた子オブジェクトの影響を受けているmouseenter/mouseleave

Question

コントロールパネル（myNestContainer）がドキュメントの準備ができていません。 mouseenterが発生したときにmyNestContainerと表示されるnavMyNestというボタンがあります。これは正常に動作します。

問題は、私はしかし、myNestContainerでネストされたDIVコンテナは、すぐ一つは、mouseleaveテイク効果を入力し、コントロールパネルを閉じているように、ある与えられた、ユーザーがコントロールパネルを探索できるようにしたいということです。

これは、mouseenter/mouseoutよりはるかによく機能していますが、まだ機能がありません。

子オブジェクトをオーバーライドして、ユーザーが見ている間にコントロールパネルが開いたままになるようにする方法についての考えはありますか？

ありがとうございます。

$(document).ready(function() { 
$("div#myNestContainer").hide(); 
}); 

$("div#navMyNest").live("mouseenter", function(event) { 
    $("div#myNestContainer").show(); 
}); 

$("div#myNestContainer").live("mouseleave", function(event) { 
    $("div#myNestContainer").hide(); 
}); 

Answer 1

あなたが問題を克服するためにjqueryのホバー機能を使用することができます...

http://api.jquery.com/hover/

それは基本的にあなたが現在直面している問題を処理します。次のコードを使用してください

$("div#myNestContainer").hover( 

    function() { 
    $("div#myNestContainer").show(); 
    }, 

    function() { 
    $("div#myNestContainer").hide(); 
    } 
); 

Answer 2

このタイプのものを動作させるには、たくさんの醜いハックに頼らざるを得ませんでした。ブラウザ固有のハッキングもありました。私の場合、私は入れ子要素にiframe要素を持っていました。

遅延/タイムアウトを使用してマウスの（x、y）位置を取得し、mousemoveイベントに応答する必要がありました。

基本的には、マウスが境界領域外になるまで定期的にチェックしてから、要素を削除する必要があります。

私はフェードアウトエフェクトを使用して要素を削除し、遅延時間を少しでも気にしませんでした。

は、右上隅にあるFacebookの「F」アイコンをホバリングしてアクションでそれを参照してください：http://www2.highpoint.edu/

Answer 3

使用event.relatedTarget場合は目に見えるネストされた要素にマウスを移動し、親要素を維持します。

$('#myNestContainer').mouseout(function(e) 
{ 
    var evt = e || window.event; 
    if (evt.relatedTarget != document.getElementById('navMyNest')) 
    { 
     $("#myNestContainer").hide(); 
    } 
});