弹出div 并固定到相应的位置

设计目标：鼠标放在查询上面，在查询的下面弹出相应的div层信息，鼠标离开查询隐藏div如果进入div依然显示div 光标离开div层就隐藏div层信息。其余的功能可以模仿此代码。

第一步： 设计一个div对象放入html页面中并设置相应的属性 <span id = "peizhi">查询</span><div id="mydiv1" class="na"></div>

   例如：

 .na{
     position:absolute; // 这里一定要绝对定位
     display:none;
     border:1px solid silver;
     background:silver;
     border-radius: 5px;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     padding-bottom:10px;
     background-color: #FFFFFF;
}

// 显示div 并设置位置
function show() { 
     var X = $('#peizhi').offset().top;
     var Y = $('#peizhi').offset().left;
     $("#mydiv1").css("display","block");
     $("#mydiv1").css("left", Y);
     $("#mydiv1").css("top", X+12);
}

// 隐藏div 
function hide() {
     $("#mydiv1").css("display", "none");
}

//功能:鼠标放上去显示固定div 鼠标开隐藏div
$(function(){
     // 鼠标的光标事件
     $('#peizhi').hover(function(){
          show();
    },function(){
           hide();
    });
    $('#mydiv1').hover(function(){
          show();
    },function(){
           hide();
    }); 
});