Question

I have a workaround that shows a div when a menu item gets MouseOver, but hides both only when the div gets MouseOut. This is required for now.

However, if the div never gets MouseOver, it never hides. What I would like to do is automatically hide the div if it doesn’t get MouseOver within a few milliseconds of showing.

The hiding after a time shouldn’t be hard, but reseting this on a MouseOver challenges me. Any ideas?

Answer 1

Do something like:

function hideYourDiv() {
  $("div#yourdiv").hide();
}
var theTimeout = setTimeout(hideYourDiv, 1000);
$("div#yourdiv").mouseover(function() {
  clearTimeout(theTimeout);
});

edited to conform to “proper” use of setTimeout 😛 (though for simple stuff like this I sometimes prefer to pass it a string.. both work anyway)