鼠标悬停鼠标悬停，内容重叠

Question

当我用class=background（演示中的绿色小方块）鼠标悬停div时，我用class=hover淡入div（在演示中显示灰色和蓝色div）。

灰色与.background部分重叠，我可以在其中移动鼠标，而不会触发mouseout上的.background。

但是...

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

如何防止这种情况发生，以便只要我将鼠标悬停在新显示的.hover div上，就不会触发{。1}}'。background'？

mouseout

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

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

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

.Wrap {
  width: 650px;
  height: 800px;
}
.container {
  position: relative;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}
.AddDiv {
  position: absolute;
  top: 0px;
}
.background {
  width: 20px;
  height: 20px;
  background-color: green;
  position: absolute;
  left: 170px;
  top: 10px;
}
.content {
  width: 170px;
  height: 120px;
  background-color: grey;
  position: relative;
  left: 15px;
  top: 15px;
}
.navigation {
  width: 190px;
  height: 40px;
  background-color: blue;
  position: relative;
  top: 30px;
  left: 5px;
}
.hover {
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 1001;
  display: none;
}

Answer 1

使用NotFound()代替mouseleave：

mouseout