Explication détaillée du code d'invite retardé pour la boîte d'invite javascript

Fonction de boîte d'invite : lorsque la souris pointe sur l'avatar, une boîte d'informations apparaît. La souris peut être déplacée vers la boîte d'informations. Lorsque la souris quitte l'avatar, la boîte d'informations disparaît. la boîte d'information, la boîte d'information disparaît.

Idées de mise en œuvre :

1. Obtenez des éléments.
2. Lorsque la souris pointe sur p1, p2 s'affiche.
3. Lorsque la souris quitte p1, faites disparaître p2 avec un délai de 0,5 seconde, afin d'avoir le temps de déplacer la souris vers p2.
4. Lorsque la souris pointe sur p2, p2 s'affiche. Étant donné que setTimeout est défini à l'étape 3 pour faire disparaître p2, p2 peut être affiché en effaçant setTimeout avec clearTimeout().
5. Lorsque la souris quitte p2, faites disparaître p2 avec un délai de 0,5 seconde, pour avoir le temps de pointer la souris sur p1.
6. À l'étape 2, le pointeur de la souris a été défini sur p1 et p2 sera affiché. Cependant, puisque setTimeout est défini à l'étape 5 pour faire disparaître p2, donc à l'étape 2, clearTimeout() est ajouté pour effacer. setTimeout pour afficher p2.

Code JS :

<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>

Le code étant similaire, il peut être simplifié comme suit :

<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>

Code HTML, CSS :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!