jQuery的悬停怪事当孩子

http://jsfiddle.net/GNQyt/jQuery的悬停怪事当孩子

将鼠标悬停在绿框，然后移动鼠标来的孩子名单。突然开始像疯了一样闪烁，反正为了防止这个但保持悬停在儿童？

* 后来编辑

2012-02-10 Brian

这是您的工作代码http://jsfiddle.net/GNQyt/18 我使用了延迟方法。一旦你离开.icn达到ul你有1000毫秒。如果您在所需的时间内点击ul，则淡出它的请求将被删除。

$('.icn').on({ 
    mouseenter: function() { 

     clearTimeout($(this).data('timeoutId')); 

     $(this).children('ul').show('fast'); 
    }, 
    mouseleave: function() { 

     var self = this; 

     var timeoutId = setTimeout(function() { 
      $(self).children('ul').hide('fast'); 
     }, 1000); 

     $(self).data('timeoutId', timeoutId); 
    } 
});

来源

2012-02-10 23:13:55 danwit

这是您的工作代码 - > http://jsfiddle.net/GNQyt/18/延迟设置为1000毫秒 – danwit 2012-02-10 23:20:44

谢谢，我相信这将是我当前网站的最简单解决方案。 :) – Brian 2012-02-10 23:26:09

欢迎:) – danwit 2012-02-10 23:27:45

http://jsfiddle.net/GNQyt/5/

使用了mouseenter，而不是在这种情况下，

这里徘徊是 “的MouseEnter” 的一个不错的互动比较与 “鼠标悬停” http://api.jquery.com/mouseover/

该Demo非常清楚。

来源

2012-02-10 22:44:49 danwit

这似乎隐藏子完全不过，我想它保持对父母一方或子女悬停状态，并隐藏在鼠标离开，只是抑制闪动时，我搬过来的孩子。 – Brian 2012-02-10 22:52:31

闪烁是由远离绿色框和弹出窗口而产生的。由于您离开了绿色框，计算机之间的距离会导致计算机关闭弹出窗口，但在弹出窗口完全关闭之前，鼠标到达弹出窗口，导致它再次打开。理想情况下，两者应该相交，以允许鼠标直接从框移动到弹出窗口。或者，在关闭弹出窗口之前增加延迟时间。

来源

2012-02-10 22:56:47

我会如何准确地增加延迟？使用“setTimeout（function（）{$（this）.children（'ul'）。toggle（'fast'）;}，200）”似乎完全消除了悬停。 – Brian 2012-02-10 23:09:25

闪烁并不是因为悬停孩子，而是在关闭时捕捉菜单。移动top: 0px; left: 0px;左上方的菜单解决了这个问题。另外通过height: 500px; width: 500px;改变跨度的高度和宽度也解决了。为了使高度和宽度有效，将跨度改为div。

来源

2012-02-10 22:58:13 sevenkul

不幸的是，该列表是为了从跨度分离。这是一个图标，可以弹出一个对话框，但弹出窗口的其中一个也可以有链接，因此我需要维护悬停。 – Brian 2012-02-10 23:10:35

http://jsfiddle.net/GNQyt/17/

这里有一个击中格另一种解决方案。这是一个非常黑，但我想你会得到一个感觉出它:)

请记住，

<span> 
    <div> 
    </div> 
</span>

是非法操作，因为你不应该换块元素为行内元素。

来源

2012-02-10 23:07:45 danwit

jQuery的悬停怪事当孩子

回答

相关问题