CODEWITHSUNDEEP
jquerymouseovermouseout
Danienllxxox
Danienllxxox

Reputation: 423

Jquery mouseover and mouseout keeps flashing

I am having some issues with jQuery MouseOut and MouseOver.

Every time I hover over the selected div, the child div that needs to show appears. however, it starts flashing.

I have no idea why. I have posted the code up 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 the 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 appreciate all your help :)

Upvotes: 5

Views: 6100

Answers (3)

Afsal
Afsal

Reputation: 349

In jQuery, both mouseover() and mouseenter() events are fire when the mouse enters the matched element. The only different is in the way of the “event bubbling” handle in child element Ref: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();
    });

});

Upvotes: 0

SAFEER N
SAFEER N

Reputation: 1197

try this

$(document).ready(function() {
    $('.section-text').hide();

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

});

Upvotes: 1

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

DEMO

Use mouseenter and mouseleave instead.

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

});

Upvotes: 8

Related Questions