CODEWITHSUNDEEP
javascriptjqueryhtmlmouseovermouseout
devamat
devamat

Reputation: 2503

jQuery mouseover / mouseout show/hide div

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

enter image description here

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

Upvotes: 0

Views: 3686

Answers (2)

Mustkeem K
Mustkeem K

Reputation: 8758

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

Upvotes: 2

Saranya Rajendran
Saranya Rajendran

Reputation: 757

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

Upvotes: 1

Related Questions