JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果_javascript技巧

搜索了好久，终于发现了可行的2个思路如下，这2个方法有个例子，不是我写的，我也没用到，转过来分享一下，演示地址。我的方法参考了方法B的思路。

方法A：

把浮动div和触发元素a放于同一个父级元素内，鼠标经过父级元素时触发显示。这样鼠标移动到div时仍然 处于该父级元素内，则div不会隐藏。

方法B：

鼠标经过a时弹出div，鼠标离开a时设置一个计时器用来关闭div，如果鼠标移动到div后则清除计时器。
—————————————————————————————————————————————————————————————————————————————

我这个方法就是采用了上面方法B的思想，当用户离开触发事件的图像后，资料卡div要延时3秒才后关闭，用户拥有足够的时间进行相应的操作，当用户点击其他好友图像时，则会立刻调用hidden方法，将之前的打开正在计时的div关闭。

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

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

在HTML中，需要调用showInfoCard和hideInfoCard方法，使用以下语句监听鼠标事件：

这些都是动态的代码片段，采用的时候需要引入jquery.js框架，当然也可以修改成纯JS的。上面的完成了，AJAX取得信息，然后利用JS在上面div中插入HTML代码即可完成显示，最后来张初步的效果图，挺丑的...