Jquery Hover 闪烁问题 [英] Jquery Hover Flickering issue

问题描述

Hope u people will be fine. Here is my basic code:

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

in this demo you can see when we hover on div with id="container", a div with class="nav" fades in. But the problem is that after doing this if i hover on div with class="nav" the div fades out and in again, and if i mover cursor slightly within .nav div, it repeats this behavior repeatedly. I don't want to this behaviour when we hover on .nav div or mover cursor within this div.

Thank, and sorry for my bad english.

解决方案

Try

$(document).ready(function(){ 

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

Taken from http://api.jquery.com/stop/

I changed the markup to add a containing div as well which stops a mouse leave being called.

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

Now when you hover over the controls your not doing a mouseleave which causes the blink.

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

这篇关于Jquery Hover 闪烁问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！