QQ头像的延时提示框

      我们经常登QQ，也都经历过这种情况，鼠标放在对方的头像上就可以显示出其基本信息，利用延时器可以极好的避免了鼠标移出头像时，名片就立马消失的效果。看似很简单的操作用JavaScript写还是有点小逻辑在的。下面分享我的一篇代码：

最终效果图：

到底是如何实现的呢？

首先在body中写入两个div作为框架，并加入图片

注：这里的头像要单独拿出来，作为一个单独的图片加入进去。以便后面用JS控制鼠标经过头像时名片才显示出来。

其次为这些div加入样式

最后，为其添加JS效果：

注：setTimerout是添加定时器的，鼠标滑动时可以停留300毫秒便于切换到名片上，没有闪退的效果。

同学们可以自己试一试哦，代码还是要多敲，熟能生巧。我会一直学习前端，虽然不够聪明，但会一直坚持下去！