Based on the needs of the project, the following page effect needs to be created: when the user passes the friend's avatar in the friend's list, the basic information of the friend is displayed, which is actually a function similar to that of the QQ client.
I found a lot of codes online, and basically all of them realized that the mouse was suspended and the div popped up, and then disappeared immediately after leaving. There are also some pure CSS codes that achieve this effect, but they are useless for me. What I need is JS (because my data needs to be obtained through Ajax), and the mouse cannot be hidden immediately after leaving. There is also a function entry on this div. This page effect has been tossing me for a day, which shows 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 didn’t write them and I didn’t use them either. Let’s share them and the demo address is displayed. My method refers to the idea of Method B.
Method A:
Put the floating div and trigger element a in the same parent element, and trigger the display when the mouse passes through the parent element. 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:
The div pops up when the mouse passes a. When the mouse leaves a, a timer is set to turn off the div. If the mouse moves to the div, the timer is cleared.
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
My method adopts the idea of Method B above. When the user leaves the image that triggers the event, the data card div needs to be delayed by 3 seconds before it is closed. The user has enough time to perform the corresponding operation. When the user clicks on other friend images, the hidden method will be called immediately to close the previous opening and timing div.
Here is the JS code for my method:
//Show the data card var beforeId; //Define the global variable function showInfoCard(thisObj,id){ this.hidden(beforeId); // Immediately hide the previous selected div beforeId = id; // alert(id); // var d = $(thisObj); // var pos = d.offset(); // var t = pos.top + d.height() - 5; // The upper position of the pop-up box// var l = pos.left - d.width() - 600; // The left position of the pop-up box// $("#"+id).css({ "top": t, "left": l }).show(); // var objDiv = $("#"+id); $(objDiv).css("display","block"); $(objDiv).css("left", event.clientX-280); //The X value of the pop-up box is $(objDiv).css("top", event.clientY-10); //The Y value of the pop-up box is Y value} function hideInfoCard(id){ //Hide div //Delay for 3 seconds setTimeout('hidden('+id+')',3000); } function hidden(id){ $("#"+id).hide(); }Here 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 need to call the showInfoCard and hideInfoCard methods, and listen for mouse events using the following statement:
onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')"These are dynamic code snippets. When using it, you need to introduce the jquery.js framework, and of course it can also be modified into pure JS. The above is completed. AJAX obtains the information, and then uses JS to insert HTML code into the above div to complete the display. Finally, I have a preliminary rendering, which is quite ugly...