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

时间:2022-03-14 19:00:46

   类似于当当网的发货以后的那个发货反馈,鼠标移上去后自动会弹出一个框,位置随位置的改变而改变,代码如下: 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< 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 >
< href ="javascript:void(0)"  onmouseover ="showdetails(this,1)"  onmouseout ="hidedetails()" > 订单1 </ a >
< href ="javascript:void(0)"  onmouseover ="showdetails(this,2)"  onmouseout ="hidedetails()" > 订单2 </ a >
< href ="javascript:void(0)"  onmouseover ="showdetails(this,3)"  onmouseout ="hidedetails()" > 订单3 </ a >
< href ="javascript:void(0)"  onmouseover ="showdetails(this,4)"  onmouseout ="hidedetails()" > 订单4 </ a >
< href ="javascript:void(0)"  onmouseover ="showdetails(this,5)"  onmouseout ="hidedetails()" > 订单5 </ a >
< div  id ="details"  class ="pop" >
</ div >
</ body >
</ html >