Day3-----delayPrompt

//------------------使用延时定时器完成提示框的延迟消失

<html>
<head><title>delayPrompt</title></head>
<style type="text/css">
#box{ 500px;height: 500px;margin: 30px auto;background: pink;text-align: center;}
#prompt{ 150px;height: 100px;margin: 10px;background: gray;float: left;visibility: hidden;}
#nav{float: left; 150px;height: 300px;background: #CC3;margin: 10px}
</style>
<script type="text/javascript">
window.onload=function(){
oPrompt=document.getElementById('prompt');
oNav=document.getElementById('nav');
var timer;
oNav.onmouseover=oPrompt.onmouseover=function(){
oPrompt.style.visibility="visible";
clearTimeout(timer);
}
oNav.onmouseout=oPrompt.onmouseout=function(){
timer=setTimeout(function(){oPrompt.style.visibility="hidden"},500);
}
}
</script>
<body>
<div id="box">
<div id="prompt">This is the delayPromptBox.</div>
<div id="nav">Show Box.</div>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/fleshy/p/4115048.html