共享一个例子:(折腾了我3个多小时呀,我这里只展示了部分功能)
来自:http://www.phpweblog.net/fuyongjie/admin/EditPosts.aspx?postid=5653
功能:
    鼠标经过img通过ajax异步生成一个层(如:ajax_famous3),鼠标移开img但不悬浮在ajax_famous3层上,则ajax_famous3隐藏,若悬浮在了ajax_famous3上,该层不隐藏,当鼠标又移开ajax_famous3时,ajax_famous3又隐藏了

1.JS代码:
function ajax_post(id) {
//alert(id);
    showDiv("famous"+id);
    
if(document.getElementById("ajax_famous"+id)) {//如果已经Ajax过了,就不再去Ajax
        showDiv("ajax_famous"+id);
    } 
else {
        loading 
= "div[@name=loading"+id+"]";
        $
.ajax({
            type
: "get",
            url
: "{{url c=Post a=ACompanyPosts}}",
            data
: "member_id="+id,
            beforeSend
: function(){$(loading).show()},
            
success: function(a){if(document.getElementById("ajax_famous"+id)){return false;}else{$("#famous"+id).append(a)}}//再次确保前面没有ajax过 ,
            complete
: function(){$(loading).hide()}    
            })
    }
    
}



function
   getAbsPoint(e)  //e为元素对象,获得此元素的左上角坐标(x,y)和宽、高
{  
    
var   x = e.offsetLeft, y = e.offsetTop,= e.clientHeight,= e.clientWidth;  
    
    
while(e=e.offsetParent)
    {
       x 
+= e.offsetLeft;  
       y 
+= e.offsetTop;
      
// h += e.clientHeight;
    }
    
//document.getElementById('x').
    //$("#x").val(x+","+(x+w));
    //$("#y").val(y+","+(y+h));

    var ePoint = {"l":x,"t":y,"h":h,"w":w};
    
return ePoint;
}  

function getMousePosition(event) {//获得鼠标坐标
    var x = event.clientX;
    
var y = event.clientY;
    
if(!document.all){//适用firefox
        mouse_x=event.pageX;
        mouse_y
=event.pageY;    
    }
else{//适用ie
        mouse_x=document.documentElement.scrollLeft+event.clientX;
        mouse_y
=document.documentElement.scrollTop+event.clientY;
        
//alert(document.documentElement.scrollTop); 滚动条滚过的高度,+ 显示页面的高度原因是声明后document.body.scrollTop的值永远等于0,解决办法是只需把document.body用 document.documentElement替换即可。
    }
    
var mouseP = {"mouse_x":mouse_x,"mouse_y":mouse_y};
    
return mouseP;
    
}


function hiddenDiv(id,event) {   
    
//alert(id);
    mouseP = getMousePosition(event);
    
//alert("x:"+mouse_x+",y:"+mouse_y);
    //$("#mx").val(mouse_x);
   // $("#my").val(mouse_y);

    ajax_id = 'ajax_'+id;
    
if(ajax_div=document.getElementById(ajax_id)) {
        ePoint = getAbsPoint(ajax_div);
    } else {
        other_hiddenDiv(id); //ajax取消请求时,需隐藏要请求的内容
        return false;
    }
    
//此if语句表示鼠标在此元素范围以外,则隐藏某个层
    if(mouseP.mouse_x < ePoint.|| mouseP.mouse_x > (ePoint.+ ePoint.w) || mouseP.mouse_y < ePoint.|| mouseP.mouse_y > (ePoint.+ ePoint.h)) {
         document
.getElementById("ajax_"+id).style.display = "none";          
    }   
}

function other_hiddenDiv(id) {
     document
.getElementById(id).style.display = "none";   
}
function showDiv(id) {
    document
.getElementById(id).style.display = "";    
}

2.HTML代码:
<img title="{{$famous[i].emco_company}}" onmouseover="ajax_post('{{$famous[i].emco_member_id}}')"
onmouseout
="hiddenDiv('famous{{$famous[i].emco_member_id}}',event)">鼠标经过这显示或隐藏生成的ajax层</img>
<div id="famous{{$famous[i].emco_member_id}}" style="margin_top:-20px;margin-left:50px;background-color:blue" width="100px"><!--ajax层-->
    <div name="loading{{$famous[i].emco_member_id}}" style="display:none;position:absolute;z-index:999;">Loading...</div>
    <!--AJAX层将会在此处产生-->
</div>

3.php后台:(生成ajax层 )
function actionACompanyPosts() { //生成ajax层
        
$posts = $this->_post->mACompanyPost();
        
//dump($posts);

        
$posts_div = "<div id=ajax_famous".$_GET['member_id']." width=300px style=\"position:absolute;z-index:999;background-color:#fff;border:1px solid black;margin-top:-30px\" onmouseout=\"hiddenDiv('famous".$_GET['member_id']."',event)\">";
        if(!empty($posts)) {
            
$len = count($posts);
            
for($i = 0 ; $i < $len ; $i++) {
                
$posts_div .= ($i+1).". ".$posts[$i]['empo_name']."<br/>";
               

            }
        } 
else {
            
$posts_div .= "暂无职位";
        }
        
$posts_div .= "</div>";
        
echo $posts_div;

    }