jquery mouseleave 隐藏整个 div答案

【问题标题】：jquery mouseleave hides entire divjquery mouseleave 隐藏整个 div
【发布时间】：2023-03-08 23:07:01
【问题描述】：

有人可以帮我吗？ Js bin link。我正在尝试为用户构建照片上传 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 链接以清楚地了解问题。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

尝试改用$( ".uploader" ).hide();。

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

【讨论】：

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

【解决方案2】：

如果您只想隐藏具有 .uploader 类的 imgUploadDiv 的孩子，请这样做

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

【讨论】：