Detailed explanation of the implementation method of JS delay prompt box

This article mainly introduces the implementation method of JS delay prompt box, and analyzes the principle and specific implementation steps of JavaScript to implement the delay prompt function in the form of examples. It has certain reference value. Friends in need can refer to it.

Prompt box function: When the mouse points to the avatar, an information box pops up. The mouse can be moved to the information box. When the mouse leaves the avatar, the information box disappears. When the mouse leaves the information box, the information box disappears.

Function ideas:

1. Get elements.
2. When the mouse points to p1, p2 is displayed.
3. When the mouse leaves p1, make p2 disappear with a delay of 0.5 seconds, so that there is time to move the mouse to p2.
4. When the mouse points to p2, p2 is displayed. Because setTimeout is set in step 3 to make p2 disappear, p2 can be displayed by clearing setTimeout with clearTimeout().
5. When the mouse leaves p2, make p2 disappear with a delay of 0.5 seconds, so that there is time to point the mouse to p1.
6. In step 2, the mouse pointer has been set to p1, and p2 will be displayed. However, since setTimeout is set in step 5 to make p2 disappear, so in step 2, clearTimeout() is added to clear setTimeout to display p2. .

JS code:

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
  op2.onmouseover=function()
  {
    clearTimeout(time);
  };
  op2.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

Since the code looks similar, it can be simplified as follows:

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op2.onmouseover=op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op2.onmouseout=op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

HTML, CSS code:

<p id="p1"></p>
<p id="p2"></p>
<style>
#p1{float:left;margin-right:10px;width:50px;height:50px;background:black;}
#p2{display:none;float:left;width:200px;height:200px;background:#0CF;}
</style>

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial