Скрыть div при наведении мыши на один из двух div, но не между

Question

У меня сейчас есть два <div> с.При наведении первого на первый план должно появиться второе. Когда mouseout первое или второе, второе должно снова исчезнуть.Однако, при перемещении мыши от первого ко второму, вторая должна остаться (как mouseover-menu).

То, что я сейчас реализовал, это простые mouseover / mouseout обработчики событий: http://jsfiddle.net/tC3ZL/2/.

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

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

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

Проблема в том, что требование постоянного показа второго div при перемещении мыши от первого к второму div не работает - при перемещении мыши из первого во второй divподнять mouseout первого div.

Как я могу добавить это правило в мой код?Я попытался просто сделать http://jsfiddle.net/tC3ZL/1/:

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

, но это заставляет второй div исчезать и исчезать при перемещении мыши от первого к второму div, в то время как он должен просто оставатьсябез каких-либо эффектов.

Заранее спасибо.

Answer 1

Используйте этот код вместо вашего

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

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