效果图如下：
代码如何下：
CSS代码：
*{ margin:0; padding:0; }
ul{list-style: none;}
ul li{ display:block; float:left; 100px; height: 100px; margin-left:10px; border:1px solid #666;}
#tooltip { position: absolute; top: 200px; left:200px;}
#tooltip img { 200px ; height:200px;}
.s{ background: red;}
<body>
<ul>
<li><a href="img1.jpg" class="tooltip" title="11111111111111"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img2.jpg" class="tooltip" title="222222222222222"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img1.jpg" class="tooltip" title="33333333333333"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img2.jpg" class="tooltip" title="4444444444444"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img1.jpg" class="tooltip" title="55555555555555"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img2.jpg" class="tooltip" title="666666666666"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
</ul>
</body>
JQ代码：
$(function(){
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title;//添加一个行的myTitle属性，并把title的值传给这个属性
this.title="";//清空属性title的值
var imgTitle=this.myTitle? + this.myTitle :""; //判断this.myTitle是否为“”时，用的三元运算
var tooltip="<div id='tooltip'><img src='" + this.href +"' alt='产品预览图' /><div class='s'>"+ imgTitle + "</div></div>"; //创建新的div元素
$(this).append(tooltip);//把它追加到文档中
$("#tooltip").show("fast");//让dis 显示
}).mouseout(function(){
this.title=this.myTitle;// 鼠标滑出把myTitle属性值赋给属性title
$("#tooltip").remove();//移除dis
});
});