いずれかの要素でホバリングした場合のJQuery

Question

したがって、2つのdivがあります。 1つは「トップ」で、もう1つは「メニュー」です。

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

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

しかし、私はまた、「」「メニュー」のメニューをしますホバリングしていますので、もしそれを作りたい：示すように私は、あなたがjQueryの中で「トップ」に置くと、フェードインするには、「メニュー」を得ました私はこれをどうやってやるのだろう？

Answer 1

私はこれがあなたのためになると信じています。メニューを隠す前に半分待つ。ユーザーがその時間にメニューの上を移動すると、非表示操作が取り消されます。

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); 
}); 

Answer 2

メニューでホバリングしている場合は覚えている変数の追加：

var isHoveringMenu; 

$(".menu").mouseover(function(){ 
    isHoveringMenu = true; 
}); 

$(".menu").mouseout(function(){ 
    isHoveringMenu = false; 
    $(".menu").fadeOut(200); // you probably want this here 
}); 

$(".top").mouseover(function(){ 
    $(".menu").fadeIn(200); 
    isHoveringMenu = true; // not necessary, but sounds good 
}); 

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

あなたは少しこれを微調整することもできます - 最善の解決策は、2つのdiv要素の間の空間的関係に依存するので、我々はD」最初にレイアウトを見る必要があります。