Detailed explanation of delayed prompt code for javascript prompt box

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.

Implementation 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. Step 2 has set the mouse pointer 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>

The above is the detailed content of Detailed explanation of delayed prompt code for javascript prompt box. For more information, please follow other related articles on the PHP Chinese website!