//锋利的jQuery实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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; } 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 src="js/jquery-1.11.3.min.js"></script> <script> var x=10; var y=20; $(function () { $(".tooltip").mouseover(function (e) { this.title=""; var href=$(this).attr("href") var tooltip=$('<div id="tooltip"><img src="'+href+'"/></div>') tooltip.appendTo("body"); var json={ "top":e.pageY+y+"px", "left":e.pageX+x+"px"}; $("#tooltip").css(json).show("fast"); }).mouseout(function () { $("#tooltip").remove(); }) }) </script> </head> <body> <h3>有效果：</h3> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a> </li> </ul> <br/><br/><br/><br/> <br/><br/><br/><br/> <h3>无效果：</h3> <ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a> </li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> </body> </html>