CODEWITHSUNDEEP
jquerymouseoverflickermouseout
Airikr
Airikr

Reputation: 6436

mouseover() and mouseout() makes the overlay and control panel flick

I'm using the following code but when I have my pointer over the image, the overlay and the controls flickers. I have tested mouseenter() and hover() but it just flickers with these too.

$('.image-photo').mouseover(function() {
    $('.image-photo-overlay').show();
    $('.image-photo-controls').show();
});

$('.image-photo').mouseout(function() {
    $('.image-photo-overlay').hide();
    $('.image-photo-controls').hide();
});

Live demo: link removed because I got it worked thanks to the user undefined

How can I fix this issue?

Thanks in advance.

Upvotes: 1

Views: 1277

Answers (1)

Ram
Ram

Reputation: 144739

You can select the wrapper element, when elements are shown, the mouseout event is triggered. 

$('.background').hover(function() {
    $('.image-photo-overlay, .image-photo-controls').toggle();
});

Other option is using CSS pointer-events property:

.image-photo-overlay, .image-photo-controls {
   pointer-events: none;
}


$('.image-photo').hover(function() {
    $(this).siblings().toggle();
});

Upvotes: 1

Related Questions