当鼠标离开该div一定距离时隐藏div

我在页面上有一个div，该页面被导航栏中的项目切换。我想要做的是当用户的鼠标离开div的外边界一定距离时，该div就会隐藏起来。当鼠标离开该div一定距离时隐藏div

下面是一些示例代码：

<ul> 
    <li>This is link A</li> 
    <li>This is link C</li> 
    <li id="trigger">This is link D</li> 
</ul> 

<div id="megaMenu">This is where the menu content goes</div>

所以，当过李＃触发用户移动鼠标，巨型菜单滑下。我想要做的是当用户的鼠标超出div边界50px时，使#megaMenu向上滑动。有什么建议么？？

下面是我用jQuery核心：

$(document).ready(function() { 

    $('li#locations a').hover(function() { 
     $('#locationsSuperNav').slideDown(); 
    }); 

    $('.superNavClose').hover(function() { 
     $('#locationsSuperNav').slideUp('fast').removeClass("open"); 
    }); 

});

第二片的代码（.superNavClose）的是在把一个热点周围的菜单时，用户的鼠标点击它来关闭它的尝试。在mega菜单中有很多链接，所以我需要在用户使用它时保持打开状态。我想在鼠标离开一定距离时关闭div会很好。在此先感谢您的任何建议！

来源

2010-12-16 Mike Muller

为什么你会不使用填充周围megaMenu。这很简单，可以满足您的需求。 – Lex 2010-12-16 15:57:02

我们遇到的是用户离开div的速度。如果他们的鼠标快速离开，div将保持打开状态。需要有一个完整的方法来关闭它。 – 2010-12-16 16:08:23

您可以使用handlerOut回调从悬停功能

$(document).ready(function(){ 

    $('li#locations a').hover(function(){ 
     $('#locationsSuperNav').slideDown(); 
     }, function(){ 
      $('#locationsSuperNav').slideUp('fast').removeClass("open"); 
     }); 

});

来源

2011-02-19 23:50:20 Mark

当鼠标离开该div一定距离时隐藏div

回答

相关问题