マウスサスペンション2段メニューを作成する場合、jQueryマウスが同時に2つの領域を移動する判断

マウスを1つのレベルのメニューボタンに置いて2つのレベルのメニューを表示する機能を作成すると
a:ボタンb:メニュー
需要:マウスをaに移動して、bを表示して、aあるいはbから上へ移動して、bを隠します
ここで問題なのは、aに移動するとbが表示され、マウスをbに移動して次の操作を行うが、bに移動するとaを離れると、aを離れるイベント--bが隠され、どうしてもbにマウスを移動できないようだ.
解決方法:
重点を置く:
この効果は、B領域の少なくとも一部がA領域と重なる必要がある.
①:BはAの中にあります.
html
1
2
3 < div   style = "width:200px; height:200px; border:1px solid red;"   id = "a" >      < div   style = "width:100px; height:100px; border:1px solid skyblue; margin:50px auto; display:none;"   id = "b" > div > div >
jq
1
2
3
4
5
6
7
8
9 $(document).ready( function (){                 $( "#a" ).hover( function (){              $( "#b" ).show();          }, function (){              $( "#b" ).hide();          });                 });
②:Bは Aエリアにしかありません. のようになります.
html
1
2 < div   style = "width:200px; height:200px; border:1px solid red;"   id = "c" > div > < div   style = "width:100px; height:100px; border:1px solid skyblue; display:none; margin-top:-10px;"   id = "d" > div >
jq
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 $(document).ready( function (){          $( "#c" ).hover( function (){              $( "#d" ).show();          }, function (){              $( "#d" ).hide();          });                     $( "#d" ).hover( function (){              $( "#d" ).show();          }, function (){              $( "#d" ).hide();          });                            });