JS displays the effect of a card when you move the mouse over a friend profile picture in the friend list

Based on the project requirements, you need to make the following page effect: when the user mouse goes through the Friends picture in the friend list, display the basic information of this friend, in fact, it is similar to the functions of the QQ client.

After finding a lot of code on the Internet, the div is displayed after the mouse is suspended and disappears immediately after it leaves. Some pure CSS code has achieved this effect, but it is useless to me. What I need is JavaScript (because my data needs to be obtained through Ajax ), you cannot hide it immediately after you move the mouse away. This div also has a function entry. This page has been working on me for a day. It can be seen that my JS and CSS technologies need to be improved...

After searching for a long time, I finally found two feasible ideas as follows. There is an example of these two methods. I did not write them, and I did not use them either. I will share them with you and the demo address. My methods refer to Method B's ideas.

Method:

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

Method B:

When the mouse passes through a, a div is displayed. When the mouse leaves a, a timer is set to close the div. If the mouse moves to the div, the timer is cleared.
-----------------------------------------------------------------------------

This method is based on the above method B. After the user leaves the image that triggers the event, the data card div will be closed after a delay of 3 seconds, the user has enough time to perform corresponding operations. When the user clicks another friend image, the user immediately calls the hidden method to close the previously opened div.

The following shows the JS Code of my method:

// Display the var beforeId of the data card; // define the global variable function showInfoCard (thisObj, id) {this. hidden (beforeId); // immediately hide the previously selected div beforeId = id; // alert (id); // var d =$ (thisObj ); // var pos = d. offset (); // var t = pos. top + d. height ()-5; // the top position of the pop-up box // var l = pos. left-d. width ()-600; // left position of the pop-up box // $ ("#" +id).css ({"top": t, "left": l }). show (); // var objDiv =$ ("#" + id); inline (objdiv).css ("display", "block"); inline (objdiv).css ("left", event. clientX-280); // The Position of the pop-up box X values (objdiv).css ("top", event. clientY-10); // pop-up box position Y value} function hideInfoCard (id) {// hide div // latency 3 seconds setTimeout ('den den ('+ id + ')', 3000);} function hidden (id) {$ ("#" + id ). hide ();}

The following is a 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 must call the showInfoCard and hideInfoCard methods and use the following statement to listen to 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, you can also modify them to pure JS. The above is done, AJAX gets information, and then inserts HTML code in the above div using JS to complete the display, and finally comes a preliminary, ugly...