two adjacent (or very close) div,div1 binding mouseout events execute to make div2 disappear when triggered. Div2 bind mouseover events and let div2 display when triggered. When the mouse is removed from the div1 and immediately moved to the div2,div2, it will continue to display. If the div2 disappears after the mouse is removed from the div1 logically, and the event bound by the div2 cannot be triggered
<body>
<div class="a" style="width: 500px;height: 500px;background-color: white;border: 1px red solid"></div>
<div class="b" style="width: 50px;height: 50px; background-color: yellow; position:relative; top:2px;"></div>
<script type="text/javascript">
$(".a").on("mouseout",function(){
console.log("out",new Date().getTime());
$(".b").hide();
console.log("hide",new Date().getTime());
});
$(".b").on("mouseover",function(){
console.log("over",new Date().getTime());
$(".b").show();
console.log("show",new Date().getTime());
})
</script> 