在兩個div之一的mouseout上隱藏div，但不在

Question

之間我目前有兩個<div> s。當第一個懸停時，第二個應該淡入。當第一個或第二個第一個或第二個時，第二個應該再次淡出。但是，將鼠標從第一個移動到第二個時，第二個應該保持（如鼠標懸停菜單）。

我現在實現的很簡單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的第一個分區。

我怎麼可能在我的代碼中添加此規則？我試着只是做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); 
    });