如果你正在使用jQuery，你还可以使用“mouseleave”函数，它可以为你处理所有这些问题。

$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);

Do_something将在鼠标进入targetdiv或其任何子div时触发，do_something_else仅在鼠标离开targetdiv及其任何子div时触发。

如果你添加(或拥有)一个CSS类或id到父元素，那么你可以这样做:

<div id="parent">
  <div>
  </div>
</div>

JavaScript:
document.getElementById("parent").onmouseout = function(e) {
  e = e ? e : window.event //For IE
  if(e.target.id == "parent") {
    //Do your stuff
  }
}

所以只有当事件在父div上时，才会执行东西。

有一个简单的方法可以让它起作用。元素和所有子元素都设置了相同的类名，那么:

element.onmouseover = function(event){
 if (event.target.className == "name"){
 /*code*/
 }
}

我检查原始元素的偏移量以获得元素边界的页面坐标，然后确保只有当鼠标退出超出这些边界时才触发鼠标退出操作。很脏，但很管用。

$(el).live('mouseout', function(event){
    while(checkPosition(this, event)){
        console.log("mouseovering including children")
    }
    console.log("moused out of the whole")
})

var checkPosition = function(el, event){
    var position = $(el).offset()
    var height = $(el).height()
    var width = $(el).width()
    if (event.pageY > position.top 
|| event.pageY < (position.top + height) 
|| event.pageX > position.left 
|| event.pageX < (position.left + width)){
    return true
}
}

虽然你提到的解决方案使用jquery， Mouseenter和mouseleave是原生dom事件，所以你可以不使用jquery。

简单地，我们可以检查e.relatedTarget是否有子类，如果为真则返回函数。

    if ($(e.relatedTarget).hasClass("ctrl-btn")){
        return;
    }

这是为我工作的代码，我用于html5视频播放，暂停按钮切换悬停视频元素

element.on("mouseover mouseout", function(e) {

    if(e.type === "mouseout"){

        if ($(e.relatedTarget).hasClass("child-class")){
            return;
        }

    }

});