<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style> #div1{ 300px; height: 20px; background: #009933; } #div2{ 150px; height: 20px; margin: 10px; background: #cccccc; display: none; } </style> <script> window.onload=function () { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer='none'; oDiv1.onmouseover=function () { oDiv2.style.display='block'; }; oDiv1.onmouseout=function () { timer=setTimeout(function () { oDiv2.style.display='none' },300) }; oDiv2.onmouseover=function () { oDiv2.style.display='block'; clearTimeout(timer); } oDiv2.onmouseout=function () { setTimeout(function () { oDiv2.style.display='none' },300) } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
在鼠标移入和移出的时候，不至于变得那么快，你可以在提示框上做操作。