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

On mouseover, when the 'change' is displayed , does it show over the picture? — luckystars, Feb 26 '13 at 10:06

score 17 · Answer 1 · answered Feb 26 '13 at 09:54

17

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

answered Feb 26 '13 at 09:54

luckystars

1,704
12
12

2

"they travel up the DOM with each mouseover / mouseout event triggering to see if the user has truly "entered" or "left" the given element." – Johnston Jun 13 '13 at 18:23
Was looking for a React solution... The DOM hasn't changed. +1 :) – Laoujin Sep 14 '19 at 00:44

score 3 · Answer 2 · edited Feb 26 '13 at 10:18

3

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.

edited Feb 26 '13 at 10:18

Ravi Y

4,296
2
27
38

answered Feb 26 '13 at 10:02

Terence Jefferies

358
1
4

score 2 · Answer 3 · answered Jul 24 '19 at 14:11

2

Try:

.change { 
    pointer-events: none;
}

answered Jul 24 '19 at 14:11

Onshop

2,915
1
27
17

score 1 · Answer 4 · answered Feb 26 '13 at 09:56

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

jQuery mouseover/mouseout flickers

4 Answers4

Linked