JS implements the effect of displaying the data card when the mouse passes over the friend's avatar in the friend list_javascript skills

Based on the needs of the project, it is necessary to create the following page effect: when the user's mouse passes over the friend's avatar in the friend list, the basic information of the friend is displayed, which is actually a function similar to the QQ client.

I found a lot of codes on the Internet, and they basically realize that the div will pop up after the mouse is hovered, and it will disappear immediately after leaving it. There are also some pure CSS codes that achieve this effect, but they are useless to me. What I need is JS (because my data needs to be obtained through Ajax), and it cannot be hidden immediately after the mouse leaves. There are functions on this div. Entrance. The effect of this page took me a whole day, which shows that my JS and CSS skills need to be improved...

After searching for a long time, I finally found two feasible ideas as follows. There are examples of these two methods. They were not written by me and I have not used them. I would like to share them here, Demo address. My method refers to the idea of ​​method B.

Method A:

Place the floating div and the trigger element a in the same parent element, and trigger the display when the mouse passes over the parent element. In this way, when the mouse moves to the div, it is still within the parent element, and the div will not be hidden.

Method B:

When the mouse passes a, the div pops up. When the mouse leaves a, set a timer to close the div. If the mouse moves to the div, the timer is cleared.
—————————————————————————————————————————————— —————————————————————————

My method is based on the idea of ​​method B above. When the user leaves the image that triggered the event, the data card div will be closed after a delay of 3 seconds. The user has enough time to perform the corresponding operation. When the user clicks on other When the friend image is displayed, the hidden method will be called immediately to close the previously opened and timing div.

The JS code of my method is given below:

//显示资料卡 
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(); 
}

Here is the hidden div code snippet in HTML:

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

In HTML, you need to call the showInfoCard and hideInfoCard methods and use the following statements to listen for mouse events:

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

These are dynamic code snippets. When using them, you need to introduce the jquery.js framework. Of course, they can also be modified into pure JS. The above is completed, AJAX obtains the information, and then uses JS to insert the HTML code in the above div to complete the display. Finally, here is a preliminary rendering, which is quite ugly...