Javascript 内容重叠的鼠标悬停鼠标

当我用

class=background

（演示中的绿色小方块）将鼠标移到div上时，我用

class=hover

（在演示中显示灰色和蓝色的div）将div淡入

灰色部分与

.background

重叠，我可以在

.background

上移动鼠标，而无需触发

鼠标输出

但是

如果我将鼠标移到灰色div之外（例如，将鼠标悬停在蓝色div上），则会触发
.background
上的
mouseout

如何防止这种情况发生，以便只要我将鼠标悬停在新显示的
.hover
div上，就不会触发“.background”上的
mouseout


$（'.AddDiv'）。在（'click'，function（）上{
var html=''；
$（'.Wrap'）.prepend（html）；
});
$（“.Wrap”）.on（“鼠标悬停”，“.background”，函数（）{
$（this.next（“.hover”）.fadeIn（500）；
});
$（“.Wrap”）.on（“mouseout”，“.hover”，函数（）{
美元（本）。淡出（200）；
});
.Wrap{
宽度：650px；
高度：800px；
}
.集装箱{
位置：相对位置；
顶部：5px；
左：5px；
宽度：200px；
高度：200px；
背景色：红色；
浮动：左；
左边距：5px；
边缘顶部：5px；
}
AddDiv先生{
位置：绝对位置；
顶部：0px；
}
.背景{
宽度：20px；
高度：20px；
背景颜色：绿色；
位置：绝对位置；
左：170px；
顶部：10px；
}
.内容{
宽度：170px；
高度：120px；
背景颜色：灰色；
位置：相对位置；
左：15px；
顶部：15px；
}
.导航{
宽度：190px；
高度：40px；
背景颜色：蓝色；
位置：相对位置；
顶部：30px；
左：5px；
}
.悬停{
宽度：200px；
高度：200px；
背景色：rgba（255、255、255、0.8）；
位置：绝对位置；
z指数：1001；
显示：无；
}

AddDiv
使用
mouseleave
而不是
mouseout
：

$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});

$(".Wrap").on("mouseover", ".background", function () {
    $(this).next(".hover").fadeIn(500);
});


$(".Wrap").on("mouseleave", ".hover", function () {
$(this).fadeOut(200);
});

$（'.AddDiv'）。在（'click'，function（）上{
$（'.Wrap'）。前置（$（''）；
});
$（.Wrap”）.on（“鼠标悬停”，“.background”，函数（）{
$（this.next（“.hover”）.fadeIn（500）；
});
$（“.Wrap”）.on（“mouseleave”，“.hover”，函数（）{
美元（本）。淡出（200）；
});
使用
mouseleave
而不是
mouseout
：

$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});

$(".Wrap").on("mouseover", ".background", function () {
    $(this).next(".hover").fadeIn(500);
});


$(".Wrap").on("mouseleave", ".hover", function () {
$(this).fadeOut(200);
});

$（'.AddDiv'）。在（'click'，function（）上{
$（'.Wrap'）。前置（$（''）；
});
$（.Wrap”）.on（“鼠标悬停”，“.background”，函数（）{
$（this.next（“.hover”）.fadeIn（500）；
});
$（“.Wrap”）.on（“mouseleave”，“.hover”，函数（）{
美元（本）。淡出（200）；
});
您想做什么？请花几分钟时间将您的问题编辑成我们可以理解的内容，记住：我们可以看到您的代码，但我们不知道代码背后的意图。而且，目前，您的问题的文本很难解析为您希望发生的事情的明确陈述。我希望鼠标悬停在绿色框上，并显示div class=“hover”，当我从class=“hover”中移出鼠标时，class=“hover”隐藏了您的意思是，当鼠标移动到“hover”中的“content”和“navigation”上时，这一切都不应该消失？你想做什么？请花点时间把你的问题编辑成我们可以理解的东西，记住：我们可以看到你的代码，但我们不知道你代码背后的意图。而且，目前，您的问题的文本很难解析为您希望发生的事情的明确陈述。我希望鼠标悬停在绿色框上，并显示div class=“hover”，当我从class=“hover”中移出鼠标时，class=“hover”隐藏了您的意思是，当鼠标移动到“hover”中的“content”和“navigation”上时，这一切都不应该消失？