qq延迟提示框

效果是类似于，将鼠标放到qq的头像上，会出来一个信息提示框，将鼠标移出头像，信息框会消失。
但是如果提示框出现了，将鼠标再移动到提示框上的时候，提示框还是显示状态。效果图如下：

html结构代码：

<style>
.qq{
    width: 280px;
    height: 600px;
    background-color: #fff;
    border:1px solid #ccc;
    box-shadow:2px 2px 1px #eee;
    position: relative;
}
.avatar{
    width: 60px;
    height: 60px;
    border-radius:50%;
    box-shadow: 5px 0 5px #eee,-5px 0 5px #eee,0 5px 5px #eee,0 -5px 5px #eee;
    position:absolute;
    left:10px;
    top:40px;
}
.info{
    width: 280px;
    height: 150px;
    box-shadow: 2px 0 1px #ccc,-2px 0 1px #ccc,0 2px 1px #ccc,0 -2px 1px #ccc;
    position:absolute;
    right:-285px;
    top:40px;
    display:none;
}
</style>
<div class="qq">
    <div class="avatar"></div>
    <div class="info"></div>
</div>

js代码如下：

// 获取标签
var avatar = document.querySelector('.avatar');
var info = document.querySelector('.info');
var timerId = null; // 定义定时器变量
// 移入事件
avatar.onmouseover = info.onmouseover = function(){
    // 将之前设置过的定时器清除掉
    clearTimeout(timerId)
    // 让提示框延迟显示
    timerId = setTimeout(function(){
        info.style.display = 'block';
    },500)
}
// 移出事件
avatar.onmouseout = info.onmouseout = function(){
    // 将之前设置过的定时器清除掉
    clearTimeout(timerId)
    // 让提示框延迟消失
    timerId = setTimeout(function(){
        info.style.display = 'none';
    },500)
}