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

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

a: 按钮  b:菜单

需求: 鼠标移到a上,显示b, 从a或b上移走,隐藏b

这里有一个问题是, 当移到a上时候 b显示了, 我们要把鼠标移到b上进行下一步操作, 但是一旦向b上移动,就离开了a,这时触发了离开a的事件--b被隐藏, 貌似无论如何也无法将鼠标移到b上

解决方法:

划重点:

这种效果需要B区域至少有一部分地方跟A区域是重合的。

①：B在A里面：

html

< 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

$(document).ready( function (){

        $( "#a" ).hover( function (){
            $( "#b" ).show();
        }, function (){
            $( "#b" ).hide();
        });

    });

②：B只有一部分在A区域里。如：

html

< 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

$(document).ready( function (){
        $( "#c" ).hover( function (){
            $( "#d" ).show();
        }, function (){
            $( "#d" ).hide();
        });

        $( "#d" ).hover( function (){
            $( "#d" ).show();
        }, function (){
            $( "#d" ).hide();
        });


    });