jQuery mouseover / mouseout显示/隐藏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();
});

Answer 1

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

Answer 2

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

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