Jquery mouseover e mouseout continua piscando

Estou tendo alguns problemas com o jQuery MouseOut e MouseOver.

Toda vez que eu passar o mouse sobre o div selecionado, a div filha que precisa aparecer aparece. no entanto, começa a piscar.

Eu não tenho ideia do porquê. Eu postei o código no JsFiddle.

http://jsfiddle.net/Dn6Rq/

Aqui está o código HTML:

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,

Aqui está o 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(); }); }); 

Eu apreciaria toda sua ajuda 🙂

DEMO

Use mouseenter e mouseleave vez disso.

 $(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(); }); }); 

tente isso

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

No jQuery, os events mouseover () e mouseenter () são triggersdos quando o mouse entra no elemento correspondente. A única diferença está no caminho do identificador de “evento borbulhante” no elemento filho. Ref: http://www.mkyong.com/jquery/different-between-mouseover-and-mouseenter-in-jquery/

Por favor encontre a resposta em 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(); }); });