JS implementation of the mouse through the Friends list of Friends avatar display Information Card effect _javascript skills

Based on the needs of the project, you need to make a page effect as follows: When the user mouse through the Friends list of Friends Avatar, show the basic information of the friend, in fact, that is similar to the QQ client that function.

Search on the Internet a lot of code, the basic implementation of the mouse suspension after the Div, after leaving immediately disappeared. There are some pure CSS code to achieve this effect, but it is useless to me, I need is JS (because my data is also to be obtained through Ajax), and the mouse can not be hidden immediately after leaving the div on the function entrance. This page effect toss me one day, this shows my JS and CSS technology to be improved ...

Search for a long time, finally found a viable 2 ideas as follows, these 2 methods have an example, not I wrote, I did not use to, turn to share, demo address. My method refers to the idea of method B.

Method A:

The floating div and trigger element A are placed inside the same parent element, and the mouse triggers the display when it passes through the parent element. This allows the mouse to move to the div while still inside the parent element, and the div is not hidden.

Method B:

Mouse over a when the pop-up div, the mouse left a when set a timer to close the Div, if the mouse moved to the DIV then clear the timer.
—————————————————————————————————————————————————————————————————————————————

My method is to use the idea of the above method B, when the user leaves the image that triggers the event, the data card div is delayed for 3 seconds before it closes, the user has enough time to do the appropriate operation, and when the user clicks on the other buddy image, it immediately calls the hidden method and closes the div that is timing the previous opening.

The JS code for my method is given below:

Displays the data card 
var Beforeid;//define global variable 
function Showinfocard (thisobj,id) { 
This.hidden (Beforeid);// Immediately hide the previous selected pop-up div 
beforeid = ID; 
alert (ID); 
var d = $ (thisobj); 
var pos = D.offset (); 
var t = pos.top + d.height ()-5; Top position of pop-up 
//var L = pos.left-d.width ()-600;///////// 
$ ("#" +id). CSS ({"Top": T, "Left": L}). Show () c11/>// 

var objdiv = $ ("#" +id); 

$ (objdiv). CSS ("Display", "block"); 

$ (objdiv). CSS ("left", event.clientx-280); Position x value of pop-up box 

(objdiv). CSS ("top", event.clienty-10);//Popup position Y-value 
} 
function Hideinfocard (ID) {//Hide div 
//Delay 3 seconds 
settimeout (' Hidden (' +id+ ') ', 3000); 
} 

function hidden (ID) { 
$ ("#" +id). Hide (); 
}

The following is a snippet of hidden div code in HTML:

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

In HTML, you need to invoke the Showinfocard and Hideinfocard methods to listen for mouse events using the following statement:

These are the dynamic code fragment, the adoption of the need to introduce the Jquery.js framework, of course, can also be modified into a pure JS. The completion of the above, Ajax to obtain information, and then use JS in the above div insert HTML code to complete the display, the last to Zhang preliminary effect picture, very ugly ...