同じ要素または他の要素をホバリングしているfadein要素？

Question

私はこれが非常に複雑な仕事ではないと思うので、私はさまざまな検索で何度もstackoverflowを検索しました。検索された解をいくつかの言葉で表現する方法はわからないので、すべての検索が失敗しました。

これは、私は、ページのロード時、ナビゲーションを持ち出す4秒後にフェードアウトし、ナビゲーションのdivをホバリングするときに戻ってそれをフェードインするために使用するコードです - マウスが離れたときに、それをフェードアウト：

$(".navigation").delay(4000).fadeTo(1000, 0); 
$(".navigation").on({ 
    mouseleave: function() { 
     $(this).delay(200).fadeTo(100, 0); 
    }, 
    mouseenter: function() { 
     $(this).stop().fadeTo(100, 1); 
    } 
}); 

今、私は、ナビゲーションdiv自体または別のdiv要素がホバリングされている間にナビゲーションをフェードインさせる追加されたコードを探しています...このdivまたは他のdiv要素が残っているときにnavigation-divをフェードアウトしますマウス。

これを達成するためにこのコードを強化することができますか、別のものが必要ですか？

ありがとうございます！私はあなたがこの問題を解決することができます重要な情報を共有することから始めます マティアス

Answer 1

：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget

ここでは、mouseenterとmouseleaveの両方が彼らのイベントデータでrelatedTarget性質を持っていることがわかります。それは、それぞれ "来る"または "行く"要素を参照します。

以下は、AとBのdivがmouseinとmouseoutの点で「接続」されているソリューションのプロトタイプです。要素「から来ること」要素はどちらもAやBの

$('.show-navigation').on('mouseenter', function(e) { 
 
    if (!$(e.relatedTarget).hasClass('show-navigation')) { 
 
    console.log('Show Navigation'); 
 
    } 
 
}); 
 

 
$('.show-navigation').on('mouseleave', function(e) { 
 
    if (!$(e.relatedTarget).hasClass('show-navigation')) { 
 
    console.log('Hide Navigation'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a" class="show-navigation">Element A</div> 
 
<div id="b" class="show-navigation">Element B</div> 
 
<div id="c">Element C</div>

ある「として」あれば私だけハンドラを実行 mouseleave中、どちらもAやBの であれば、私は唯一のハンドラを実行 mouseenter中に