一、实现原理
定时器和排他思想
二、代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0}
.main{ width: 100px; height: 300px; background: #eee; float: left; margin-top: 10px; }
.box{width: 100px; height: 100px; background:orange; float: left; margin-top: 10px; margin-left:10px;display: none;}
</style>
</head>
<body>
<div class="main"></div>
<div class="box"></div>
<script type="text/javascript">
window.onload = function(){
var main = document.querySelector('.main');
var box = document.querySelector('.box');
var timer = null;
main.onmouseover = box.onmouseover = show;
main.onmouseout = box.onmouseout = hide;
function show(){
clearTimeout(timer)
box.style.display = 'block';
}
function hide(){
timer = setTimeout(function(){
box.style.display = 'none';
},500)
}
}
</script>
</body>
</html>
