jquery - Jqueryのマウスオーバーとマウスアウトが点滅し続ける

Question

jQuery MouseOut と MouseOver に問題があります。

選択した div にカーソルを合わせるたびに、表示する必要がある子 div が表示されます。ただし、点滅を開始します。

理由がわかりません。コードを JsFiddle に投稿しました。

http://jsfiddle.net/Dn6Rq/

HTMLコードは次のとおりです。

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

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

});

私はあなたのすべての助けに感謝します:)

Answer 1

デモ

代わりにmouseenterandを使用してください。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();
    });

});