Question

So I have 2 divs. One is “top” and one is “menu.” I got “menu” to fade in when you hover on “top” in JQuery, as shown:

$(".top").mouseover(function(){
    $(".menu").fadeIn(200);
});

$(".top").mouseout(function(){
    $(".menu").fadeOut(200);
});

But I want to make it so if I’m also hovering on “menu,” “menu” will stay faded in. How would I do this?

Answer 1

I believe this will do it for you. It waits half a second before hiding the menu. If the user hovers over the menu in that time, then it cancels the hide operation.

var timer;

$(".top").mouseover(function(){
    clearTimeout(timer);
    $(".menu").fadeIn(200);
});

$(".top, .menu").mouseout(function(){
    timer = setTimeout(function() {
        $(".menu").fadeOut(200);
    }, 500);
});

$(".menu").mouseover(function() {
    clearTimeout(timer);
});