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

Question

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

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

但是..

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

如何防止这种情况发生，这样只要我将鼠标悬停在新显示的.hover div 上，'.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="container">
    <div class="background"></div>
    <div class="hover">
      <div class="content"></div>
      <div class="navigation"></div>
    </div>
  </div>
</div>
<button class=AddDiv>AddDiv</button>

Answer 1

使用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);
});