运行如下两段代码；
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div{float:left; margin:10px;} #div1 {width:50px; height:50px; background:red;} #div2 {width:250px; height:180px; background:green; display:none;} </style> <script> window.onload=function() { var oDiv1=document.getElementById('div1');//提高兼容性将div1引入 var oDiv2=document.getElementById('div2'); var timer=null; oDiv1.onmouseover=function() { oDiv2.style.display='block'; }; oDiv1.onmouseout=function() { timer=setTimeout(function (){ oDiv2.style.display='none'; },500); }; oDiv2.onmouseover=function() { clearTimeout(timer); }; oDiv2.onmouseout=function() { oDiv2.style.display='none'; }; }; </script> </head> <body> <div id="div1" ></div> <div id="div2" ></div> </body> </html><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>提示框</title> <style> div{float:left; margin:10px;} #div1 {width:50px; height:50px; background:red;} #div2 {width:250px; height:180px; background:green; display:none;} </style> <script> window.onload=function() { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); oDiv1.onmouseover=function() { oDiv2.style.display='block'; }; oDiv2.onmouseout=function() { oDiv2.style.display='none'; }; }; </script> </head> <body> <div id="div1" ></div> <div id="div2" ></div> </body> </html>
两段代码运行表现出的结果一下，显然第二段代码的行数较少
