<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0 ; padding: 0; } body{ position: relative; } #tooltip{ position: absolute; } ul li a img{ width: 50px; } #tooltip img{ width: 100px; } </style> </head> <body> <ul> <li><a href="images/hai-01.jpg" class="tooltip" title="苹果 ipod"> <img src="images/hai-01.jpg" alt="苹果 ipod"> </a></li> <li><a href="images/gu-01.jpg" class="tooltip" title="鸭梨 ipod"> <img src="images/gu-01.jpg" alt="苹果 ipod"> </a></li> </ul> </body> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ var x=10; var y=20; $('a').mouseover(function(e){ this.mytitle=this.title; this.title=""; var imgtitle=this.mytitle?"<br/>"+this.mytitle:""; var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'／>"+imgtitle+"</div>"; $('body').append(tooltip); $('#tooltip').css({'top':(e.pageY+y)+'px','left':(e.pageX+x)+'px'}).show("fast") }).mouseout(function() { this.title=this.mytitle; $("#tooltip").remove(); }).mousemove(function(e) { $("#tooltip").css({'top':(e.pageY+y)+'px','left':(e.pageX+x)+'px'}) }); }) </script> </html>