改写《锋利的jQuery》第三章章节总结的例子

<style>
    li{ float:left; list-style:none; padding:3px;}
    img{ border:#CCC 1px solid;}
    #tooltip{ display:none; border:#CCC 1px solid; position:absolute;}
    .img1{ display:block;}
    .div1{ padding:0px; margin:0px; background:#111; color:FFF; font-family:微软雅黑;}
</style>
<ul>
    <li><a href="images/apple_1_bigger.jpg" class="tooltip"><img src="images/apple_1.jpg"/></a></li>
    <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="第二个产品"><img src="images/apple_2.jpg"/></a></li>
    <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三个产品"><img src="images/apple_3.jpg"/></a></li>
    <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四个产品"><img src="images/apple_4.jpg"/></a></li>
</ul>
<script>
    var x =10;
    var y =10;
    $("a.tooltip").mouseover(function (e) {
        this.myTitle =this.title;
        this.title ="";
        this.imgTitle =this.myTitle ?this.myTitle : "无title";
        var tooltip ="<div id='tooltip'><img class='img1' src='"+this.href +"'/><div class='div1'>"+this.imgTitle +"</div></div>"
        $("body").append(tooltip);
        $("#tooltip").css({
            "top": +(e.pageY + y) +"px",
            "left": +(e.pageX + x) +"px"
        }).show("fast");
    }).mouseout(function () {
        $("#tooltip").remove();
        this.title =this.myTitle;
    }).mousemove(function (e) {
        $("#tooltip").css({
            "top": +(e.pageY + y) +"px",
            "left": +(e.pageX + x) +"px"
        });
    })
</script>