Search code examples
javascriptmouseoverjsnimouseout

how the two event become workable simulatenously in javascript


I am having a Label and the popup panel and when the mousemove over the label the popup will show and when the mousemove out of the label the popup will hide. I have completed till this but when the popup is showing and the cursor move inside it the popup will stay.I am facing the problem that the two events are not working simultaneously.


Solution

  •            var hideDelayTimer=null;
               var hideDelay=100;
               label.addEventListener("mouseover",function()
              {
                if(hideDelayTimer)clearTimeout(hideDelayTimer);
    
                  alert('mouseover');
                  label.appendChild(popup);     
              });
    
              label.addEventListener("mouseout",function()
                {   
                alert('mouseout');
                if(hideDelayTimer)clearTimeout(hideDelayTimer);
                hideDelayTimer=setTimeout(function()
                {
                hideDelayTimer=null;
                label.removeChild(popup);
    
               },hideDelay);