Jquery Hover 闪烁问题答案

【问题标题】：Jquery Hover Flickering issueJquery Hover 闪烁问题
【发布时间】：2011-01-07 15:32:20
【问题描述】：

希望你们一切都好。这是我的基本代码：

在这个演示中，您可以看到当我们将鼠标悬停在 id="container" 的 div 上时，带有 class="nav" 的 div 会淡入。但问题是，如果我将鼠标悬停在 class="nav" 的 div 上" div 淡出又淡入，如果我在 .nav div 内稍微移动光标，它会反复重复此行为。当我们将鼠标悬停在 .nav div 或此 div 内的移动光标上时，我不想出现这种行为。

谢谢，抱歉我的英语不好。

【问题讨论】：

标签： jquery hover

【解决方案1】：

试试

$(document).ready(function(){ 

   $("#containerNav").hover(
   function() { $('.nav').stop(true, true).fadeIn(); },
   function() { $('.nav').stop(true, true).fadeOut(); }
   );
   });

取自http://api.jquery.com/stop/

我更改了标记以添加一个包含 div 以及停止调用鼠标离开。

<div id="containerNav">
    <div class="nav"><a class="prev" href="#">Prev</a> <a class="next" href="#">Next</a>  </div>
    <div id="container">
        Some Content in Container
    </div>
</div>

现在，当您将鼠标悬停在控件上时，您不会执行导致闪烁的 mouseleave。

http://jsfiddle.net/kr9pY/9/

【讨论】：

感谢您的快速回复，但不幸的是这也不起作用。此更改没有任何影响。
奇怪..我真正注意到它“闪烁”的唯一一次是当我的鼠标悬停在出现的元素上时，我认为这是因为你在 div 上做 mouseleave，只要你悬停在导航元素上。我刚刚编辑了我的答案，将导航元素放在 div 下方，但我似乎没有闪烁。
+1 用于在我即将发布的同一个包含 div 的想法中进行编辑。
谢谢，刚刚编辑了最后一次以包含包含 div 作为唯一答案，考虑到这就是他的要求，无需更改标记的布局。
不错的解决方案，但是您实际上不需要在悬停时使用两个功能，因为您可以使用.fadeToggle()，例如this（我还稍微更新了css）