在两个div之一的鼠标移出时隐藏div，但不在两者之间隐藏

Question

I currently have two <div> s. When hovering the first, the second should fade in. When mouseout ing 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);
    });