Mouseover Mouseout с перекрывающимся контентом

Question

Когда я наводил курсор на div с class=background (маленький зеленый квадрат в демо), я исчезаю в div с class=hover (показывая серые и синие divs в демо).

Серый частично перекрывает .background, и я могу перемещать мышь вокруг него, не вызывая mouseout на .background.

Но ..

Если переместить мышь за пределы серого DIV (парить над синим, например), то mouseout на .background сработал.

Как я могу предотвратить это, так что, пока я нависаю над вновь отображаемым .hover div, mouseout на '.background' не будет запущен?

$('.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); 
});