因为你的div包含子元素，所以当你鼠标移到子元素上时，你就可以“鼠标移出”容器，这是设计好的。因为它在自己的可见空间之外，而在子元素的可见空间之内。因为子元素也在父元素之内，它“继承”了事件，因为它被视为一个单独的卷，但仍然在父元素的空间内。这就是为什么当你“mouseout”子元素时会触发事件。这被称为“冒泡”事件冒泡元素的家谱。
正如Mahi所指出的，如果你使用“mouselave”，它只会在离开附加元素的区域时触发。
MDN文档解释了其中的区别：https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave
但权威的答案最好在W3C DOM规范中查看：
当指针设备从一个元素移动到它的一个后代元素的边界上时，它必须被调度。
所以它清楚地表明，当你移动到它的一个子元素时，必须触发mouseout事件。所以为什么会发生这种情况的原因是设计，规范：
https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout
我添加了一个示例来显示差异

x = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(e){
        $(".over span").text(x += 1);
        console.log(e.target);
    });    
    $("div.over > h3").mouseover(function(){
        $(".over > h3").css("color", "red");
    }).mouseout(function(){
        $(".over > h3").css("color","black");
    });
    
});

个字符

x = 0;
$(document).ready(function(){
    $("div.over").mouseleave(function(){
        $(".over span").text(x += 1);
    });    
    $("div.over > h3").mouseover(function(){
        $(".over > h3").css("color", "red");
    }).mouseout(function(){
        $(".over > h3").css("color","black");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

的字符串
现在，如果你在“z-space”中向下移动子元素，它不再影响mouseout事件：

x = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(){
        $(".over").css("background","red");
    }); 
    $("div.over").mouseover(function(){
        $(".over").css("background","#444");
    });       
    $("div.over > h3").css("display", "block");
    $("div.over > h3").css("position", "relative");
    $("div.over > h3").css("z-index", -1000);
    $("div.over > h3").mouseover(function(){
        $(".over > h3").css("color", "red");
    }).mouseout(function(){
        $(".over > h3").css("color","black");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

当鼠标指针离开任何子元素以及所选元素时，将触发mouseout事件。

mouseleave事件仅在鼠标指针离开所选元素时触发。