マウスオーバーで重複しているコンテンツ

Question

class=background（デモの小さな緑色の正方形）でdivをマウスオーバーすると、class=hover（デモの灰色と青色のdivが表示されます）のdivが消えます。

グレーは部分的に.backgroundと重なり、mouseoutを.backgroundにトリガーすることなく、マウスをその内部で動かすことができます。

しかし..

Iは、（例えば、青色にカーソルを合わせるために）グレー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); 
});