延时提示框

延时提示框,注释了的是细致版本.没注释的精简版本.

头像

详细资料

<script>
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var timer = null;
    // 鼠标移入头像时,让详细显示.
    div1.onmouseover =  div2.onmouseover = function(){   
        clearTimeout(timer);
        div2.style.display ='block';
    };
    // 鼠标移出头像时,让详细隐藏.
    div1.onmouseout =  div2.onmouseout = function(){
        //定时器.让鼠标移出头像时,间隔500毫秒在让详细隐藏.
        timer = setTimeout(function(){
            div2.style.display = 'none';
        }, 0);
    };
    // 当鼠标移入详细资料的时候,详细资料不会消失
    //div2.onmouseover = function(){
    //     clearTimeout(timer);
    //     div2.style.display ='block';
    // };
    // 当鼠标移出详细资料的时候,让详细资料消失
    // div2.onmouseout = function(){
    //      //定时器.让鼠标移出详细资料时,间隔500毫秒在让详细隐藏.
    //     setTimeout(function(){
    //         div2.style.display = 'none';
    //     },500);
    // };
 
</script>