一、实现原理
定时器和排他思想
二、代码
<!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>