Question

I have a nav that has subnavs. When the user hovers over the li’s in the nav I show the subnav for the respective li. I’m running into an issue where moving the mouse from the nav to subnav fires the mouseout. I was thinking I would need to implement a timeout but unsure where to start and can’t get it working. See the below js fiddle…

http://jsfiddle.net/Nhvc6/

Answer 1

Try replacing:

timeoutHandle = setTimeout(navMouseOut($subnav), 300);

With this:

timeoutHandle = setTimeout(navMouseOut, 300, $subnav); //Works for all but IE!!

This passes a reference to the function navMouseOut. The navMouseOut parameter $subnav is also passed as a third parameter to setTimeout. Note the third parameter of setTimeout will be ignored by IE. Works in all modern browsers though.

If you require cross-browser comparability, you should pass an anonymous function to setTimeout in order to invoke navMouseOut

timeoutHandle = setTimeout(function() {
    navMouseOut($subnav);
}, 300);

Updated Fiddle

More info

• Set timeout MDN