CODEWITHSUNDEEP
jquerymouseovermouseout
user1083320
user1083320

Reputation: 1946

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

Upvotes: 4

Views: 7752

Answers (4)

Onshop
Onshop

Reputation: 3095

Try:

.change { 
    pointer-events: none;
}

Upvotes: 2

Terence Jefferies
Terence Jefferies

Reputation: 358

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.

Upvotes: 3

devnull69
devnull69

Reputation: 16584

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

Upvotes: 1

luckystars
luckystars

Reputation: 1754

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

Upvotes: 17

Related Questions