Jquery悬停闪烁问题

Question

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

http://jsfiddle.net/kr9pY/7/

在这个演示中，当我们悬停在id为“container”的div上时，一个class为“nav”的div淡入。但问题是，之后如果我在class为“nav”的div上悬停鼠标，该div会淡出并再次淡入，如果我在.nav div内稍微移动鼠标，它会反复重复此行为。我不希望在我们悬停在.nav div上或在此div内移动鼠标时出现这种行为。

谢谢，对我的糟糕英语表示抱歉。

- Faisal Khurshid

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

现在当你悬停在控件上时，你不会执行鼠标离开操作，这会导致闪烁。

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

- Loktar

---

奇怪...我唯一真正注意到它“闪烁”的时候是当我的鼠标悬停在出现的元素上，我认为这是因为你在div上执行了一个mouseleave，当你悬停在导航元素上时。我刚刚编辑了我的答案，将导航元素放在div下面，似乎就不会出现闪烁了。 - Loktar

+1 表示我同意你的想法，我们可以在同一个 div 中进行编辑。 - Null Set

谢谢，我刚刚进行了最后一次编辑，将包含div作为唯一答案，考虑到这就是他所问的，不需要更改他标记的布局。 - Loktar

谢谢Loktar，你太棒了。现在这个解决方案运行良好。问题只是通过添加一个容器div得到解决。 - Faisal Khurshid

这是一个不错的解决方案，但你并不需要在hover中使用两个函数，因为你可以使用.fadeToggle()，像这样（我还稍微更新了一下CSS）。 - mekwall