Fadein élément sur planant même ou autre élément?

Question

puisque je pense que ce n'est pas une tâche très complexe, j'ai cherché stackoverflow plusieurs fois avec des recherches différentes. mais comme je ne sais pas vraiment comment décrire la solution recherchée en quelques mots, toutes les recherches ont échoué.

c'est un code que j'utilise pour afficher une navigation quand la page se charge, fade après 4 secondes et se fanent le dans lors du survol de la navigation div - et la décoloration dehors quand les feuilles souris:

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

maintenant je suis à la recherche de code ajouté qui laisse la navigation se fondre pendant que la div-navigation elle-même OU un autre élément-div est plané ... et disparaissent la div de navigation lorsque ce div lui-même ou l'autre est laissé Souris. Puis-je renforcer ce code pour y parvenir ou ai-je besoin de quelque chose de différent?

merci beaucoup! matthias

Answer 1

Je vais commencer par le partage d'une information importante qui peut vous aider à résoudre ce problème: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget

Ici vous pouvez voir que les deux mouseenter et mouseleave ont une propriété relatedTarget dans leurs données d'événement. Il fait référence à l'élément "venant de" ou "allant à" respectivement. Ci-dessous j'ai prototypé une solution où les divs A et B agissent comme "connectés" en termes de mousein et de mouseout. Pendant mouseenter je n'exécute le gestionnaire si l'élément « venant de » est ni A ni B. Pendant mouseleave j'exécute uniquement le gestionnaire si le « va » élément est ni A, ni 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>