Javascript jquerymouseleave隐藏整个div

有人能帮我吗。我正在尝试为用户建立一个照片上传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();    
            });

var imgUploadDiv=$（“#促销区”）；
imgUploadDiv.mouseenter（函数（）{
imgUploadDiv.追加（“”）；
});
imgUploadDiv.mouseleave（函数（）{
imgUploadDiv.hide（）；
});

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

尝试使用

$（“.uploader”）.hide（）取而代之

您现在所做的是隐藏整个div，因为您使用的是缓存变量imgUploadDiv，该变量被设置为表示整个上载区域。
如果您只想隐藏
imgUploadDiv
的子对象，并且该子对象具有类
.uploader

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

谢谢你们！我感谢你的帮助。