请教：弹出层的问题

请问高手：为什么我的弹出层在鼠标还没有移开图片的时候就自己收回去了呢，谢谢，谢谢啦！下面是代码，
html：：：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移到图片上出现隐藏层</title>
<link href="图层.css" rel="stylesheet" type="text/css" " />
<script  type="text/javascript" src="../jquery 1.8.2.js">
</script>
<script type="text/javascript" src="图层.js"></script>
</head><body>
<div id="wrap">
  
      <div id="div1"><img src="img/5.jpg" width="500" height="400" /></div>
      <div id="div2" >
        <span><p>图片介绍</p>
        <div>"这是一张白天鹅的图片" </div></span>
      </div>
    
</div>
</body>
</html>css：：：@charset "utf-8";
/* CSS Document */#wrap{ width:500px; height:400px; text-align:center; margin:0 auto; float:left}
#div1{ position:relative;width:500px; height:400px;margin:0 auto; float:left}
#div2{display:none ;position:absolute;width:500px; height:400px;margin:0 auto; background:#966; }js：：：
// JavaScript Document
$(document).ready(function(){
var $offset=$('#div1').offset();
$('#div2').css({left:$offset.left,top:$offset.top,opacity:0.5});
$('#div1').hover(function(){$('#div2').slideDown('slow');},function(){
$('#div2').slideUp(7000);});
});