jquery鼠标移到图上去变大

<!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>
<title>jquery练习</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
ul{overflow: hidden}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script>
$(function(){
$(".tooltip").hover(
function(e){
$("body").append("<div id=\'tooltip\'><img src="+$(this).attr("href")+"></div>")
$("#tooltip").css({
left: e.pageX+20+"px",
top: e.pageY+20+"px"
}).show("fast")
},
function(){
$("#tooltip").remove()
}
).mousemove(function(e){$("#tooltip").css({
left: e.pageX+20+"px",
top: e.pageY+20+"px"
})})
})
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_1_big.jpg" class="tooltip" title=""><img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg" alt="苹果 iPod"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_2_big.jpg" class="tooltip" title="苹果 iPod nano"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_2.jpg" alt="苹果 iPod nano"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_3_big.jpg" class="tooltip" title="苹果 iPhone"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_3.jpg" alt="苹果 iPhone"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_4_big.jpg" class="tooltip" title="苹果 Mac"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_4.jpg" alt="苹果 Mac"></a></li>
</ul>
<h3>无效果：</h3>
<ul>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_1_big.jpg" title="苹果 iPod"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg" alt="苹果 iPod"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_2_big.jpg" title="苹果 iPod nano"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_2.jpg" alt="苹果 iPod nano"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_3_big.jpg" title="苹果 iPhone"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_3.jpg" alt="苹果 iPhone"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_4_big.jpg" title="苹果 Mac"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_4.jpg" alt="苹果 Mac"></a></li>
</ul>
</body>
</html>

jquery练习

body { margin: 0; padding: 40px; background: rgba(255, 255, 255, 1); font: 80% / 180% Arial, Helvetica, sans-serif; color: rgba(85, 85, 85, 1) }
img { border: none }
ul, li { margin: 0; padding: 0 }
ul { overflow: hidden }
li { list-style: none; float: left; display: inline; margin-right: 10px; border: 1px solid rgba(170, 170, 170, 1) }
#tooltip { position: absolute; border: 1px solid rgba(204, 204, 204, 1); background: rgba(51, 51, 51, 1); padding: 2px; display: none; color: rgba(255, 255, 255, 1) }