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

Question

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.

Answer 1

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