JS实现了鼠标经过好友列表中的好友头像时显示数据卡片的效果

基于项目的需要，需要做出如下页面效果：当用户鼠标经过好友列表中好友的头像时，显示该好友的基本信息，其实就是类似于QQ客户端的功能。

在网上找到了很多代码，基本实现了鼠标悬停后弹出div，离开后立即消失。有一些纯CSS代码达到了这个效果，但是对我来说没什么用。我需要的是JS(因为我的数据会通过Ajax获取)，鼠标离开后不能马上隐藏。这个div上有一个函数条目。这个页面的效果折腾了我一天，说明我的JS和CSS技术还有待提高.

经过长时间的寻找，我终于找到了以下两个可行的想法。我没有写这两种方法的例子，也没有使用它们。让我们分享它们并演示地址。我的方法是指方法b的思想。

方法a:

浮动div和触发器元素a放置在同一个父元素中，当鼠标经过父元素时会触发显示。这样，当鼠标移动到div时，它仍然在父元素中，div不会被隐藏。

方法b:

鼠标经过A时弹出Div，鼠标离开A时设置定时器关闭div，鼠标移动到div时定时器清零。—————————————————————————————————————————————————————————————————————————————

我的方法采用了上面方法B的思路。当用户离开触发事件的图像时，数据卡的div将在3秒钟延迟后关闭。用户有足够的时间执行相应的操作。当用户点击其他朋友的图片时，隐藏的方法将被立即调用，以关闭之前打开的div。

下面给出了我的方法的JS代码：

//显示数据卡var beforeId//定义全局变量函数show infocard (thisobj，id) {this。隐藏(before id)；//立即隐藏上一次选择弹出的div beforeId=id//alert(id)；//var d=$(this obj)；//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 . client x-280)；//弹出框的位置x为$ (objdiv)。CSS ('top '，事件。client y-10)；//弹出框位置的y值}函数hideInfoCard(id){ //hide div //延迟3秒setTimeout('hidden(' id ')'，3000)；}函数隐藏(id){ $(“#”id)。hide()；}以下是HTML中隐藏的div代码片段：

div id=' id ' style=' display : none；宽度width:250px高度：150 px；背景色-: # D1EEE；position:absolute'/div在HTML中，需要调用showInfoCard和hideInfoCard方法，并使用以下语句来监控鼠标事件：

Onmouseover=' show infocard (this，$ {friend。friendid } ')' onmouseout=' hide infocard($ { friend。friendid} ')'这些是动态代码片段，需要引入jquery。js框架，并且可以修改成纯JS。以上完成后，AJAX获取信息，然后用JS将HTML代码插入到上面的div中，完成显示。最后做了初步渲染，相当难看.