jquery mouseleave hides entire div

0
votes

Can anyone help me here? Js bin link. I am trying to build a photo upload div for the user. My plan is if a user hovers over the picture i show him option to upload a picture. If he leaves the mouse he sees the profile picture only. But the problem there is when the user leaves the mouse,mouseleave event hides entire div including the picture. I am not expert in jquery. Mistakes are the i way i hide this i think. But i can't figure out how only to hide the div created in mouseenter event. This is the script. 

            var imgUploadDiv = $('#promo-area');
            imgUploadDiv.mouseenter(function() {
                imgUploadDiv.append( "<div class='uploader'> <i class='fa fa-picture-o fa-4x' id='uploader-icon'></i></div>"  );
            });

            imgUploadDiv.mouseleave(function() {
                imgUploadDiv.hide();    
            });

Please check out the js bin link i mentioned to understand the problem clearly.

2
javascriptjqueryhtml

2 Answers

0
votes

try using $( ".uploader" ).hide(); instead.

What you're doing now is hiding the entire div because you're using your cached variable imgUploadDiv which is set to mean the entire uploading area.

0
votes

do it like this if you want only to hide the childs of imgUploadDiv which have the class .uploader

imgUploadDiv.mouseleave(function() {
    imgUploadDiv.children('.uploader').hide();  
});