jQuery mouseover/mouseout flickers

问题

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

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

回答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.

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

回答4:

Try:

.change { 
    pointer-events: none;
}

来源：https://stackoverflow.com/questions/15085932/jquery-mouseover-mouseout-flickers