jQuery - 综合实例 - 文本输入框与标签自动更换

[代码] 

<html> 
 
     <head> 
 
         <script src="jquery-1.2.js"></script> 
 
         <script> 
 
             $(document).ready(function () { 
 
                 var text_alternate = $("<span></span>"); 
 
                 $("#text").after(text_alternate); 
 
                 $(text_alternate).mouseover(function () { 
 
                     $(text_alternate).css("visibility", "hidden"); 
 
                     $("#text").css("visibility", "visible"); 
 
                 }); 
 
                 $("#text").mouseout(function () { 
 
                     $("#text").css("visibility", "hidden"); 
 
                     text_alternate.css("position", "absolute"); 
 
                     text_alternate.css("left", $("#text").get(0).offsetLeft + "px"); 
 
                     text_alternate.css("top", $("#text").get(0).offsetTop + "px"); 
 
                     text_alternate.css("width", $("#text").get(0).offsetWidth + "px"); 
 
                     text_alternate.css("height", $("#text").get(0).offsetHeight + "px"); 
 
                     $(text_alternate).text($("#text").val()); 
 
                     $(text_alternate).css("visibility", "visible"); 
 
                 }); 
 
                 $("#text").mouseout(); 
 
             }); 
 
         </script> 
 
     </head> 
 
     <body> 
 
         beforetext<input id="text">aftertext 
 
     </body> 
 
 </html>