Hide div on mouseout of one of two divs, but not in between

Question

I currently have two <div>s. When hovering the first, the second should fade in. When mouseouting the first or the second, the second should fade out again. However, when moving the mouse from the first to the second, the second should stay (like a mouseover-menu).

What I've implemented now are simple mouseover/mouseout event handlers: http://jsfiddle.net/tC3ZL/2/.

$('#div1').mouseover(function() {
    $('#div2').fadeIn(500);
});

$('#div1').mouseout(function() {
    $('#div2').fadeOut(500);
});

$('#div2').hide().mouseout(function() {
    $('#div2').fadeOut(500);
});

The problem is that the requirement of showing the second div persistently when moving the mouse from the first to the second div is not working - when moving the mouse from the first to the second div will raise the mouseout of the first div.

How could I possibly add this rule in my code? I tried just doing http://jsfiddle.net/tC3ZL/1/:

$('#div2').mouseover(function() {
    $('#div2').fadeIn(500);
});

but this makes the second div fade out and fade in when moving the mouse from the first to the second div, whilst it should just stay without any effects.

Thanks in advance.

Answer 1

Use this code instead of yours

    $('#div1').mouseover(function() {
        $('#div2').stop();
        $('#div2').fadeIn(500);
    });

    $('#div2').hide().mouseout(function() {
        $('#div2').fadeOut(500);
    });