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

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

非常感谢你！马蒂亚斯

Answer 1

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

您可以在此处看到mouseenter和mouseleave在其事件数据中都有relatedTarget属性。它引用了来自＆＃34;来自＆＃34;或者＆＃34;去＆＃34;元素分别。

下面我给出了一个解决方案，其中div和A作为＆＃34;连接＆＃34;在mousein和mouseout方面。在mouseenter期间，我只执行处理程序，如果＆＃34;来自＆＃34;元素既不是A也不是B. 在mouseleave期间，我只执行处理程序，如果＆＃34;转到＆＃34;元素既不是A也不是B.

＆＃13;

$('.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');
  }
});

＆＃13;

<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>

＆＃13;

悬停相同或其他元素的fadein元素？

1 个答案: