定时器 — 延时小菜单

鼠标放在粉色qq框中，黄色title提示框过一会出现；鼠标移开qq框，title提示框过一会消失

出现的时间可以根据定时器来设置秒数

html：

<div id="qq"></div>
<div id="title"></div>

css：

#qq {
    width: 150px;
    height: 300px;
    background-color: #f9c;
}
#title {
    width: 100px;
    height: 80px;
    background-color: #FC6;
    position: absolute;
    top: 10px;
    left: 160px;
    display: none;
}

js：

function $(id){return document.getElementById(id);}//封装id函数
var timer = null;//设置定时器开关

$('qq').onmouseover = show;//鼠标移入QQ面板，显示title提示框
$('qq').onmouseout = hide;//鼠标移出QQ面板，隐藏title提示框

$('title').onmouseover = show;//鼠标移入提示title框，让title提示框显示
$('title').onmouseout = hide;//鼠标移出提示title框，让title提示框消失

function show(){
    // 在显示前先把定时器关闭，否则鼠标离开QQ面板时title框会消失
    clearInterval(timer);
    $('title').style.display = 'block';                
}
function hide(){
    timer = setTimeout(function(){
        $('title').style.display = 'none';
    },1000);                
}

注意：
在写html时，提示框要和面板并列，不要包含；
提示框出现的动画效果可以随意设置，这里没有添加任何动画效果。