Question

在鼠标输入中显示/隐藏此菜单时遇到一些问题。我想在鼠标接近HEADER区域时显示菜单，并保持直到鼠标离开区域。

问题是当鼠标退出页面时因为鼠标离开功能触发并隐藏我的菜单（如果菜单本身没有锁定）

我设置了一个jsfiddle来更好地解释。 http://jsfiddle.net/aZyz8/1/

<html>
  <header>
    <nav>
      <ul>
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#">Menu Item 3</a></li>
      </ul>
    </nav>
  </header>
  <div id="debug"></div>
</html>

CSS：

html {
  background: grey;
  height: 100%;
  width: 100%;
}

header {
  background: red;
  height: 200px;
}

nav {
  background: green;
  width: 100%;
  height: 50px;
  position: absolute;
  top: -50px;
}

li {
  display: inline;
  margin-left: 20px;
}

JS：

$('header').mouseenter(function() {
  $('#debug').text('mouse enters header');
  $('nav').animate({
    top: '0'
  });
}).mouseleave(function() {
  $('#debug').text('mouse leaves header');
  // if mouse does not leave window
  $('nav').animate({
    top: '-105px'
  });
});

有没有人知道如何触发“鼠标离开页面”以放入IF？我使用hover（），hover和mouseover / mouseout几乎尝试了jQuery和普通Javascript方面的所有内容，但似乎它不适用于带有html / body标签的mouseout。

我还尝试封装该代码只有当鼠标悬停html时才能工作，但当然当我悬停“header”html失败时：无论如何，悬停状态都会破坏。

由于

Answer 1

检查事件对象的pageX和pageY，如果超出页面范围则返回。

http://jsfiddle.net/aZyz8/5/

$('header').mouseenter(function() {
    $('#debug').text('mouse enters header');
    $('nav').animate({
        top: '0'
    });
}).mouseleave(function(e) {
    var pageX = e.pageX || e.clientX;
    var pageY = e.pageY || e.clientY;

    if (pageX < 0 || pageY < 0) { // don't execute the rest of this callback
        return;
    }

    $('#debug').text('mouse leaves header');
    // if mouse does not leave window
    $('nav').animate({
        top: '-105px'
    });
});

Answer 2

如果您希望在用户将光标移出窗口时可以看到菜单，则可以在mouseleave事件上检查鼠标坐标。

$('header').mouseenter(function() {
  $('#debug').text('mouse enters header');
  $('nav').animate({
    top: '0'
  });
}).mouseleave(function(event) {
  $('#debug').text('mouse leaves header');
  // if mouse does not leave window
  if (event.clientX <= 0 || event.clientY <= 0)
  {
     return;
  }
  $('nav').animate({
    top: '-105px'
  });
});

Here就是一个例子。

jQuery / Javascript检查鼠标是否进入或退出窗口

2 个答案: