Search code examples
jquerymenumouseoversettimeoutmouseout

Jquery mouseover mouseout menu using setTimeout


Can someone help me with this simple code.. I'm still a noob on js and I don't know what im doing wrong. Basically Im trying to make a mouseover menu.

function showQuickLinks() {
//show the menu
}
function hideQuickLinks() {
//hides the menu
}

//button mouseover
$("#quick-links-dd").mouseover(function() { 
 showQuickLinks();
});

var mnuTimeout;

//clears timeout when it rolls over the button
$("#quick-links-dd").mouseover(function () {        
   clearTimeout(mnuTimeout);    
})

//$("#quick-links) - quick links container
//hides the menu when the mouse is not over the container
$("#quick-links").mouseout(function () {
  mnuTimeout = setTimeout("hideQuickLinks()",1000);
});

The mouse over works but it doesn't execute the code when the mouse is outside the link container.


Solution

  • var mnuTimeout = null;
    
    $(function() { 
       $("#quick-links-dd").hover() {
           clearTimeout(mnuTimeout);
           showQuickLinks();
       }, function() {  
          mnuTimeout = setTimeout(hideQuickLinks,1000);
       });
    });