QQ——模仿QQ，鼠标移入出现个人详细信息 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style>
#qq { width:200px; height:400px; background:#F9C; }
#title { width:240px; height:180px; background:#FC6; position:absolute; top:10px; left:220px; display:none; }
</style>
<script src="miaov.js"></script>
<script>
$(function(){
    var qq = $('qq');
    var title = $('title');
    var timer = null;
    
    qq.onmouseover = show;
    qq.onmouseout = hide;
    
    title.onmouseover = show;
    title.onmouseout = hide;
    
    function show(){
        clearInterval( timer );   //重点在这里，要先清除，再显示。否则过0.2s后因hide()还是会消失
        title.style.display = 'block';
    }
    function hide(){
        timer = setTimeout(function(){
            title.style.display = 'none';
        }, 200);
    }
});
</script>
</head>

<body>

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

</body>
</html>

 

posted @ 2017-03-22 12:43  念念念不忘  阅读(176)  评论(0)    收藏  举报