JQuery mouseover and mouseout keep blinking

Question

I'm having some problems with jQuery MouseOut and MouseOver.

Each time I hover over a selected div, a child div appears that should be displayed. however, it starts to blink.

I have no idea why. I posted the code on JsFiddle.

http://jsfiddle.net/Dn6Rq/

Here is the HTML code:

<div class="section-item-portal"> <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div> </div> 

Here is jQuery:

  $(document).ready(function () { $('.section-text').hide(); $('.section-item-portal').mouseover(function () { $(this).children('.section-text').fadeIn(); }); $('.section-item-portal').mouseout(function () { $(this).children('.section-text').fadeOut(); }); }); 

I would be grateful for your help :)

Answer 1

Demo

Use mouseenter and mouseleave .

 $(document).ready(function () { $('.section-text').hide(); $('.section-item-portal').mouseenter(function () { $(this).children('.section-text').fadeIn(); }); $('.section-item-portal').mouseleave(function () { $(this).children('.section-text').fadeOut(); }); }); 

Answer 2

try it

 $(document).ready(function() { $('.section-text').hide(); $('.section-item-portal').hover(function() { $(this).children('.section-text').fadeIn(); },function(){ $(this).children('.section-text').fadeOut(); }); }); 

Answer 3

In jQuery, the mouseover () and mouseenter () events are fire when the mouse enters the matched element. The only difference is that the descriptor of the "event bubble" in the child link: http://www.mkyong.com/jquery/different-between-mouseover-and-mouseenter-in-jquery/

Please find the answer in jsfiddle .. http://jsfiddle.net/Dn6Rq/1/

 $(document).ready(function () { $('.section-text').hide(); $('.section-item-portal').mouseenter(function () { $(this).children('.section-text').fadeIn(); }); $('.section-item-portal').mouseleave(function () { $(this).children('.section-text').fadeOut(); }); });