[task]<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>延时弹出层控制</title> <script type="text/javascript"> var isPopLayer = false; var time = null; //打开弹出层 function poplay(){ if(!isPopLayer){ //延迟1秒显示层 time = setTimeout(function(){ document.getElementById('poplay').style.display = 'block'; clplay(); isPopLayer = true; }, 1000); } } //鼠标移走时执行 function clplay(){ clearTimeout(time); time = null; } //关闭弹出层 function poclose(){ document.getElementById('poplay').style.display = 'none'; isPopLayer = false; } </script> <style type="text/css"> #poplay{ padding:1em; position:absolute; border: 3px solid #000; display:none;} </style> </head> <body> <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字1</a> 这个都是测试写的 <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字2</a> 这个都是测试写的 <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字3</a> 这个都是测试写的 <div id="poplay"> <p>弹出层的内容</p> <p>弹出层的内容</p> <p>弹出层的内容</p> <p>弹出层的内容</p> <button onclick="poclose()">关闭</button> </div> </body> </html> [/task]