延时提示框

来源：互联网发布：风行网络电影官方下载编辑：程序博客网时间：2024/06/18 03:32
<pre name="code" class="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>#div1{width:200px;height:200px;background-color:#CF3;}#div2{width:100px;height:100px;background-color:#CCC;display:none;}#div1,#div2{float:left;}</style><script type="text/javascript">window.onload=function(){//这一句非常关键var div1=document.getElementById("div1");var div2=document.getElementById("div2");var timer=null;//注意以下对代码的整合问题div1.onmouseout=div2.onmouseout=function(){//当鼠标都移开的时候，可以设置延时消失timer=setTimeout(function(){  div2.style.display='none';  },1000 );}div1.onmouseover=div2.onmouseover=function(){//当属标都在的时候，可以设置第二个div为显示状态clearTimeout(timer);//要记得timer定义之后才能在这里使用div2.style.display='block';}/*div2.onmouseover=function(){clearTimeout(timer);div2.style.display="block";}div2.onmouseout=function(){setTimeout(function(){  div2.style.display='none';  },1000 )}*/}</script></head><body><div id="div1"></div>    <div id="div2"></div></body></html>
0 0