鼠标移到某一元素则在元素旁边出现弹出框

类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：
>    < html   xmlns = "http://www.w3.org/1999/xhtml" >    < head >         < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />         < title > 框框随着鼠标点击的元素的位置改变而改变 title >         < style   type = "text/css" >        a{        border: 1px solid #0f0;        margin: 20px;        width: 60px;        height: 30px;        line-height: 30px;        float: left;        display: block;        text-align: center;        }        .pop{            width: 350px;            height: 200px;            border: 1px solid #00f;            background-color: #ffffee;            display: none;            position:absolute;  /* 注：弹出框必须为绝对定位 */        }         style >         < script   type = "text/javascript"   src = "jquery.js" > script >         < script   type = "text/javascript" >            function hidedetails(){                $("#details").hide();            }            function showdetails(thisObj,orderid){                var  d  = $(thisObj);                var  pos  =  d .offset();                var  t  =  pos .top + d.height() + 5; // 弹出框的上边位置                var  l  =  pos .left + d.width() + 5;  // 弹出框的左边位置                $("#details").css({ "top": t, "left": l }).show();                $("#details").html("订单 "+orderid+" 的内容！");            }         script >    head >    < body >    < a   href = "javascript:void(0)"   onmouseover = "showdetails(this,1)"   onmouseout = "hidedetails()" > 订单1 a >    < a   href = "javascript:void(0)"   onmouseover = "showdetails(this,2)"   onmouseout = "hidedetails()" > 订单2 a >    < a   href = "javascript:void(0)"   onmouseover = "showdetails(this,3)"   onmouseout = "hidedetails()" > 订单3 a >    < a   href = "javascript:void(0)"   onmouseover = "showdetails(this,4)"   onmouseout = "hidedetails()" > 订单4 a >    < a   href = "javascript:void(0)"   onmouseover = "showdetails(this,5)"   onmouseout = "hidedetails()" > 订单5 a >    < div   id = "details"   class = "pop" >    div >    body >    html >   

转载于:https://www.cnblogs.com/yssoft/archive/2009/05/30/1492334.html