I won’t say much nonsense, I will just post the code to you. The specific code is as follows:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Delay display prompt box</title><style>#div1 {float: left;width: 60px;height: 60px;background-color: aqua;}#div2 {position: relative;float: left;margin: 0 10px;width: 200px;height: 200px;background-color: #cccccc;display: none;}</style><script>window.onload = function () {var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var timer = null;// oDiv1.onmouseover = function () {// clearTimeout(timer);// oDiv2.style.display = 'block'; // div2// when the mouse moves into div1 };//// oDiv1.onmouseout = function () {// timer = setTimeout(function () {// oDiv2.style.display = 'none'; //Hide div2// }, 500); //In order to move from div1 to div2, when div1 is moved out of div1, there should be a delay setting when div2 is hidden // };//// oDiv2.onmouseover = function () {// clearTimeout(timer); // Clear the delay setting, when the mouse moves into div2, div2 should be displayed // };//// oDiv2.onmouseout = function () {// timer = setTimeout(function () {// oDiv2.style.display = 'none'; // When the mouse moves out of div2, div2 should be hidden // }, 500); //When the mouse moves out of div2 and into div1, div2 will flash and display again, set a delay to clear the blinking effect; // // However, after setting the delay and moving the mouse into div1, div2 is hidden because setTimeout, // // The delay should be cleared, and the code for the delay is added in the oDiv1.onmouseover event to clear the delay. // };// Since the codes in these four events are the same or similar, the following simplified processing can be done: oDiv1.onmouseover = oDiv2.onmouseover = function () {clearTimeout(timer);oDiv2.style.display = 'block';/* When the mouse is moved into div1, div2 is displayed. Although oDiv2.onmouseover is not written in the oDiv2.style.display = 'block'; but in fact oDiv2 is in the 'block' state, writing one more code has no substantial impact*/};oDiv1.onmouseout = oDiv2.onmouseout = function () {timer = setTimeout(function () {oDiv2.style.display = 'none'; //Hide div2 when the mouse is removed from div1}, 500); //In order to move from div1 to div2, there should be a delay setting when div1 is moved out of div1};// The simplified code execution result is exactly the same as the previous code effect.}</script></head><body><h2>Delay prompt box</h2><div id="div1"></div><div id="div2"></div></body></html>The points that need to be paid attention to when writing the delay prompt box are recorded in the comments. Please pay attention to it one by one. This function is smoother after reading the video tutorial. The reason is that before writing the code, a list of required functions is implemented one by one. If there is a problem, it is much better to make corresponding adjustments than to write the code directly.