基于項目的需要，需要制作出如下的一種頁面效果：當用戶鼠標經過好友列表中好友頭像時，顯示該好友的基本資料，其實也就是類似QQ客戶端的那種功能。

網上找了很多代碼，基本都實現了鼠標懸浮之后彈出div，離開之后馬上就消失了。還有些純CSS的代碼實現了這樣的效果，但是對我沒用，我需要的是JS的（因為我的數據還要通過Ajax取得），并且鼠標離開后不能馬上隱藏，這個div上還有功能入口。這個頁面效果折騰了我一天，由此可見我的JS和CSS技術有待提高...

搜索了好久，終于發現了可行的2個思路如下，這2個方法有個例子，不是我寫的，我也沒用到，轉過來分享一下，演示地址。我的方法參考了方法B的思路。

方法A：

把浮動div和觸發元素a放于同一個父級元素內，鼠標經過父級元素時觸發顯示。這樣鼠標移動到div時仍然 處于該父級元素內，則div不會隱藏。

方法B：

鼠標經過a時彈出div，鼠標離開a時設置一個計時器用來關閉div，如果鼠標移動到div后則清除計時器。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

我這個方法就是采用了上面方法B的思想，當用戶離開觸發事件的圖像后，資料卡div要延時3秒才后關閉，用戶擁有足夠的時間進行相應的操作，當用戶點擊其他好友圖像時，則會立刻調用hidden方法，將之前的打開正在計時的div關閉。

下面給出我的方法的JS代碼：

//顯示資料卡 var beforeId; //定義全局變量 function showInfoCard(thisObj,id){ this.hidden(beforeId); //立刻隱藏前一個選中彈出來的div beforeId = id; // alert(id); // var d = $(thisObj); // var pos = d.offset(); // var t = pos.top + d.height() - 5; // 彈出框的上邊位置 // var l = pos.left - d.width() - 600; // 彈出框的左邊位置 // $("#"+id).css({ "top": t, "left": l }).show(); // var objDiv = $("#"+id); $(objDiv).css("display","block"); $(objDiv).css("left", event.clientX-280); //彈出框的位置X值 $(objDiv).css("top", event.clientY-10); //彈出框位置Y值 } function hideInfoCard(id){ //隱藏div //延時3秒 setTimeout('hidden('+id+')',3000); } function hidden(id){ $("#"+id).hide(); }

下面是HTML中的隱藏的div代碼片段：

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

在HTML中，需要調用showInfoCard和hideInfoCard方法，使用以下語句監聽鼠標事件：

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')" 

這些都是動態的代碼片段，采用的時候需要引入jquery.js框架，當然也可以修改成純JS的。上面的完成了，AJAX取得信息，然后利用JS在上面div中插入HTML代碼即可完成顯示，最后來張初步的效果圖，挺丑的...