jQuery mouseover / mouseout show/hide div

Question

The blue square, shown in the picture, is buttonShowHidePicture (a button) and the red square is currentPictures (a div).

Desired functionality: when I move the mouse over the button I want the div to appear, then I want to be able to move the mouse over the div and click on one of the pictures. When the cursors it's out of the div the div must disappear.

Issue I'm facing: however, the code below works as long as I don't scroll down: when I move the cursor on the pictures on the bottom the div scrolls back up because it triggers the hide/show all the time. How can I fix this?

This is my jQuery:

$('#buttonShowHidePicture, #currentPictures').mouseover(function () {
    $('#currentPictures').show();
});

$('#currentPictures, #buttonShowHidePicture').mouseout(function () {
    $('#currentPictures').hide();
});

Mustkeem K · Accepted Answer · 2021-08-27T07:18:49.177

2

Use mouseleave event instead of mouseout. Because hide event is also firing on your images which is inside a div.

$('#currentPictures, #buttonShowHidePicture').mouseleave(function () {
$('#currentPictures').hide();
});

edited Aug 27 '21 at 07:18

answered Mar 07 '18 at 10:23

Mustkeem K

8,158
2
32
43

Thanks that fixed the behave! – devamat Mar 07 '18 at 10:30

score 1 · Answer 2 · answered Mar 07 '18 at 10:20

try something like this

$(document).ready(function () {
    $('li').mouseover(function (e) {
        e.stopPropagation();
        $('>.actions', this).css('visibility', 'visible')
    });
    $('li').mouseout(function (e) {
        e.stopPropagation();
        $('.actions').css('visibility', 'hidden')
    })
});

for more https://www.sitepoint.com/community/t/show-hide-a-div-with-mouseover-and-mouseout-on-li/6441/2

jQuery mouseover / mouseout show/hide div

2 Answers2