<div class="wrap"><ul class="img_list clr"><li><a href="images/22.jpg" title="枫叶" class="tooltip"><img src="data:images/22.jpg"></a> </li><li><a href="images/33.jpg" title="江南小城" class="tooltip"><img src="data:images/33.jpg"></a> </li><li><a href="images/44.jpg" title="绚烂如我" class="tooltip"><img src="data:images/44.jpg"></a> </li></ul>
</div>

.wrap{ width: 960px; margin:50px auto; border:1px solid #F00; min-height: 100px; }
.img_list{ padding:50px 10px 50px 40px; }
.img_list li{ position: relative; float: left; width: 250px; margin-left: 20px; height: 250px; border: 1px solid #ddd; }
.img_list li img{ width: 250px; height: 250px; }
#showPic{ position: absolute; z-index: 111; width: 400px; height: 400px; }
#showPic img{ width: 400px; height: 400px; }
#showPic p{ position: absolute; bottom:0; left: 0; right:0; z-index: 112; height: 24px; color: #fff; background:rgba(0,0,0,0.4); line-height: 24px; padding: 0 20px; font-size: 14px; }

  $("a.tooltip").mouseover(function(){ //鼠标移上去var picHref = this.href; //找到a标签中的链接var picTitle = this.title;//找到a标签的标题var picHtml = "<div id='showPic'><img src='"+ picHref +"'><p>"+ picTitle +"</p></div>";$(this).parents("li").append(picHtml); // 添加div$("#showPic").css({  //设置div的top/left/boder值"border":"1px solid #F00","top":"30px","left":"30px"}).show("fast");}).mouseout(function(){ // 当鼠标移出的时候$("#showPic").mouseover(function(){ // 当鼠标移入显示图片的时候执行的事件$(this).addClass("mOver")}).mouseout(function(){$("#showPic").remove();});setTimeout(function(){ // 延时200毫秒执行if($("#showPic").hasClass("mOver")){return;}else{$("#showPic").remove();}},200);});