制作鼠标悬停二级菜单时,jQuery鼠标同时移出两个区域的判断

当我们制作一个鼠标悬停在一级菜单按钮上展示二级菜单的功能时

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();          });                          });