jQuery mouseover/mouseout flickers

Question

I have the following HTML

<div class="individual">
    <div class="change">change</div>
    <div class="picture"><img src....></div>
</div>

The .change has position: absolute; and is invisible. On mouseover .picture, I want .change to appear, and on mouseout, to disappear. If the individual clicks .change then something should happen.

Right now, when mouse goes over change, then it is treated as mouseout of picture, and so change starts to flicker!

I then made this jQuery:

$('.change').mouseout(function(){
    $('.picture').mouseout(function(){
        $(this).parent().children('.change').hide();
    });
});

$('.picture').mouseover(function(){
    var i = $(this).parent().children('.change').show();
});

This works fine only the first time! If I move out the picture, then when I come back on, and go on change, everything starts to flicker!! What do I do?!

Thanks

Answer 1

Use 'mouseenter' instead of 'mouseover' and 'mouseleave' instead of 'mouseout'

$('.picture').mouseenter(function(){
   $(this).parent().children('.change').hide();
});



$('.picture').mouseleave(function(){
    var i = $(this).parent().children('.change').show();
});

Answer 2

I have always found mouseout and mouseover to be rather buggy. Not sure why, you might try:

$(function() { 
    $('.picture').hover(function() {
        $('.change').show();
    },function() { $('.change').hide(); });
});

As long as the appearance of ".change" doesn't move ".picture", causing the hover to be broken, then this should work for you.

Answer 3

The problem is that hiding .change will move the .picture element to the place where .change used to be. This will trigger both .mouseover() and .mouseenter() so there's no point to replace.

You should change CSS positioning to absolute for both elements so removing .change won't move .picture

Answer 4

Try:

.change { 
    pointer-events: none;
}