根据项目的需要，我们需要创建以下页面效果：当用户鼠标在好友列表中传递好友的头部时，它显示了好友的基本信息，这实际上是类似于QQ客户端的功能。


互联网上发现了很多代码，基本上是鼠标暂停后div弹出，离开后立即消失。还有一些纯CSS代码实现了这个效果，但它对我不起作用。我需要的是JS（因为我的数据也通过Ajax），和鼠标不能离开后立刻躲起来，还有的在学这一页的影响函数的入口是一天当我看到我的JS和CSS技术需要改进…

经过长时间的探索，我终于找到了2个可行的办法。这2种方法有一个示例，不是我编写的，我没有使用它，所以我将转而分享演示地址。

方法一：

浮动div和触发器元素A被放置在同一父元素中，而鼠标是由父元素触发的，所以当它移动到div时，鼠标仍然处于父元素中，然后div不隐藏。

方法B：

鼠标弹出div当它流过，当鼠标离开，定时器设置为当鼠标移动到DIV关部，计时器清零。

——……---……---…………---……---- ----

这种方法是用上述方法B的思想，当用户离开图像数据的触发事件后，将延时3秒后div收卡，有足够的时间进行相应的操作的用户，当用户点击图像的其他朋友，它会立即隐藏方法，将定时器关闭之前打开运行部

下面是我的方法的js代码：




显示/数据卡
无功beforeid； / /全局变量的定义
功能showinfocard（thisobj，ID）{
This.hidden（beforeid）； / /立即隐藏div打预选
beforeid = ID；
警报（id）；
无功 / / D = $（thisobj）；
POS =（d.offset） / /无功；
T / / var = pos.top + d.height（- 5）； / /弹出框的顶部位置
我 / / var = pos.left - d.width（- 600）； / /弹出框的左边位置
/ / $（# （CSS +身份证）{顶：T，左：L（显示）}）；


无功objdiv = $（+身份证# ）；

（objdiv美元）。Css（显示

（objdiv美元）。Css（左，事件。clientx-280）； / / X弹出框的位置值

（objdiv美元）。Css（顶事件。clienty-10）； / / Y弹出框的位置
}
功能hideinfocard（ID）{ / /格。
延迟3秒
setTimeout（隐藏（+编号+ '）'，3000）；
}

函数隐藏（id）{
$（+身份证# ）（隐藏）；
}


下面是HTML中隐藏的div代码片段：









在HTML中，该showinfocard和hideinfocard方法需要调用，和下面的语句是用来监视鼠标事件：




onmouseover =showinfocard（，$ {朋友}。friendid '）onmouseout=hideinfocard（$ {朋友}。friendid）




这些都是动态的代码片段，需要引入jquery.js框架时采用，当然可以改为纯JS。以上是成品，Ajax获取信息，然后使用js插入HTML代码在顶部的DIV来完成显示。最后，制作一个初步效果图片，它相当丑陋。