jQuery mouseleave隐藏整个div

Question

有人能帮我一下吗？ js bin链接 。 我正在尝试为用户建立照片上传div。 我的计划是，如果用户将鼠标悬停在图片上，我可以向他显示上传图片的选项。 如果他离开鼠标，他只会看到个人资料图片。 但是问题是当用户离开鼠标时，mouseleave事件隐藏了包括图片在内的整个div。 我不是jquery的专家。 错误是我隐藏这个想法的方式。 但是我不知道如何只隐藏在mouseenter事件中创建的div。 这是脚本。

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

请查看我提到的js bin链接，以清楚地了解问题。

Answer 1

尝试使用$( ".uploader" ).hide(); 代替。

现在您正在做的是隐藏整个div，因为您使用的是缓存变量imgUploadDiv，该变量设置为表示整个上传区域。

Answer 2

如果您只想隐藏具有imgUploadDiv类的.uploader的imgUploadDiv ，则可以这样.uploader

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