<!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; border:1px #000; background:#FF0;} #div2{width:200px; height:200px; border:#000 2px; background:#F00; display:none;} </style> <script> window.onload=function () { var oDiv1=document.getElementById(‘div1‘); var oDiv2=document.getElementById(‘div2‘); var timeout=null; oDiv1.onmouseover=function ()//第一个div鼠标悬浮事件 { clearInterval(timeout);//关闭延迟 oDiv2.style.display=‘block‘;//让第二个div显示 } oDiv1.onmouseout=function ()//第一个div鼠标移出事件 { timeout=setTimeout(function()//第二个div延迟一会,再消失 {oDiv2.style.display=‘none‘;},500); } oDiv2.onmouseover=function()//第二个div鼠标悬浮事件 { clearInterval(timeout);//关闭延迟, oDiv2.style.display=‘block‘;//显示 } oDiv2.onmouseout=function()//鼠标移出div2,再次延迟一会消失 { timeout=setTimeout(function() {oDiv2.style.display=‘none‘; },500); } } </script> </head> <body> <div id="div1"> </div> <div id="div2" > </div> </body> </html>
JavaScript中存在相同函数,可以给函数起个名字,再调用,减少重复代码。
时间: 2024-10-11 17:35:32