<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>延时提示框</title> <style> div { float: left; margin: 10px; } #div1 { width: 50px; height: 50px; background: blueviolet; } #div2 { width: 200px; height: 200px; background: chocolate; display: none; /* 一开始是不需要显示的 */ } </style> <script> window.onload = function(){ var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); var time = null; // 1. 首先是当我鼠标移入头像div的时候, 应该显示头像详情div oDiv1.onmouseover = function(){ clearTimeout(time); oDiv2.style.display = 'block'; } // 2. 当鼠标移出头像div的时候, 头像详情div应该延时0.5秒后再隐藏起来 oDiv1.onmouseout = function(){ time = setTimeout(function(){ oDiv2.style.display = 'none'; }, 500); } // 3. 完成第二步骤以后, 一会发现. 当我们移出div1, 移入odiv2的时候, div2还是在0.5秒以后隐藏了 // 这里需要进行改进, 就是当我鼠标移入div2的时候, 我们需要把定时器给它关掉, 不让它执行隐藏的代码 oDiv2.onmouseover = function(){ clearTimeout(time); } // 4. 此时就是当鼠标移出div2的时候, 我们要隐藏div2 oDiv2.onmouseout = function(){ // 这里是有一点小问题的, 因为如果我们是移出div2然后直接移入div1的话, 发现div2闪了以下 // 这是因为先执行了下面的隐藏, 所以这里我们也要使用延时计时器来操作, 并且如果是移入div1 // 直接关闭这个计时器即可, 不用执行隐藏的代码. time = setTimeout(function(){ oDiv2.style.display = 'none'; }, 500); } } </script> </head> <body> <div id="div1">头像</div> <div id="div2">头像详情</div> </body> </html>
下面的是需要对上面的代码进行简化处理
因为在JS中， 是允许连等于赋值的， 比如a = b = c = function(){}
那么a， b， c都是这个函数；所以上面的代码可以进行简化处理如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>延时提示框</title> <style> div { float: left; margin: 10px; } #div1 { width: 50px; height: 50px; background: blueviolet; } #div2 { width: 200px; height: 200px; background: chocolate; display: none; /* 一开始是不需要显示的 */ } </style> <script> window.onload = function(){ var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); var time = null; oDiv2.onmouseover = oDiv1.onmouseover = function(){ clearTimeout(time); oDiv2.style.display = 'block'; } oDiv2.onmouseout = oDiv1.onmouseout = function(){ time = setTimeout(function(){ oDiv2.style.display = 'none'; }, 500); } } </script> </head> <body> <div id="div1">头像</div> <div id="div2">头像详情</div> </body> </html>