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>
= function () {
var oDiv1 = ('div1');
var oDiv2 = ('div2');
var timer = null;
// = function () {
// clearTimeout(timer);
// = 'block'; //Div2 is displayed when the mouse is moved into div1// };
//
// = function () {
// timer = setTimeout(function () {
// = 'none'; //Hide div2 when the mouse removes div1// }, 500); // In order to move from div1 to div2, there should be a delay setting when div1 is moved out of div1.// };
//
// = function () {
// clearTimeout(timer); // Clear the delay setting. When the mouse moves into div2, div2 should be displayed// };
//
// = function () {
// timer = setTimeout(function () {
// = 'none'; // When the mouse moves out of div2, div2 should be hidden// }, 500); // When the mouse moves out div2 and into div1, div2 will flash and then display, set a delay to clear the flickering effect;// // But after setting the delay, when the mouse moves into div1, div2 is hidden because setTimeout,// // The delay should be cleared, and the code to clear the delay in the event should be added.// };
// Since the codes in these four events are the same or similar in correspondence, the following simplified processing can be done: = = function () {
clearTimeout(timer);
= 'block';
/* When the mouse is moved into div1, div2 is displayed, although it is not written in the event = 'block';
But in fact, oDiv2 is in the 'block' state, writing an extra sentence of code has no substantial impact*/
};
= = function () {
timer = setTimeout(function () {
= 'none'; //Hide div2 when the mouse removes 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 results are exactly the same as the previous code effect.}
</script>
</head>
<body>
<h2>Delay prompt box</h2>
<div ></div>
<div ></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.