基于JS如何实现类似QQ好友头像hover时显示资料卡

一、应用场景介绍

设想一下，当你在浏览好友列表时，鼠标轻轻滑过好友头像，一个资料卡便悄然显现，展示着好友的相关信息。这种鼠标经过特定元素时显示附加信息的效果，不仅用户体验极佳，而且在实际应用中具有广泛的参考价值。

二、技术实现

接下来，我们将如何实现这一功能。以鼠标悬停至A时显示B这一简单效果为例，我们可以采用两种方法来实现。

1. 方法一：包裹法

这种方法的核心思想是将触发元素A和要显示的元素B置于同一个父级元素内。当鼠标悬停在父级元素上时，显示元素B。这种方法有一个明显的缺点：两个元素之间不能有任何间距。当鼠标移至元素B上时，由于它仍在父级元素内，所以div不会隐藏。

以下是使用此方法的基本HTML代码：

```html

```

2. 方法二：延迟关闭法

这种方法更为灵活。当鼠标离开触发元素A后，资料卡div会延迟0.5秒再关闭，这样用户就有足够的时间进行点击或其他操作。当鼠标移入资料卡B时，会清除之前的关闭计时器，使资料卡保持显示状态。这种方法能更好地满足用户需求，提供更佳的用户体验。

HTML部分：

```html