效果图如下：
代码如何下：
CSS代码：
*{ margin:0; padding:0; }
ul{list-style: none;} ul li{ display:block; float:left; width: 100px; height: 100px; margin-left:10px; border:1px solid #666;} #tooltip { position: absolute; top: 200px; left:200px;} #tooltip img { width: 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 }); });