悬停相同或其他元素的淡入淡出元素？

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 时淡出导航 div .

我可以加强这段代码来实现这一点，还是我需要一些不同的东西？

非常感谢！ 马蒂亚斯

Answer 1

我将首先分享一条可以帮助您解决此问题的重要信息：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget

在这里您可以看到mouseenter 和mouseleave 在其事件数据中都有一个relatedTarget 属性。它分别引用“来自”或“去往”元素。

在下面，我设计了一个解决方案原型，其中 div A 和 B 在 mousein 和 mouseout 方面充当“连接”。 在mouseenter 期间，如果“来自”元素既不是 A 也不是 B，我只执行处理程序。 在mouseleave 期间，我仅在“going to”元素既不是 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>