js hover 事件代理问题

Question

html结构:

<div class="box">
     <div class="item"></div>
     <div>模块入口</div>
 </div>

js部分:

$('.box').on('mouseover','.item',function () {
    $(this).stop().animate({'fontSize': '60px'}, 400);
});
$('.box').on('mouseout','.item',function () {
    $(this).stop().animate({'fontSize': '50px'}, 400);
});

问题：box下的第一个div因为是后端动态加载，因此只有使用事件代理。js的hover事件并不支持事件代理，如果想使用事件代理就必须使用mouseover与mouseout进行代替。但实际执行结果为鼠标移入<div class="box">并无反应，鼠标移入<div class="item"></div>才会有实际的动画效果。哪里的问题呢？

补充：最终目的是鼠标移入box，item的字体动画生效

Answer 1

$('.box').on('mouseover', function () {
    let _this = $(this).find(".item");
    if(_this.length > 0) _this.stop().animate({'fontSize': '60px'}, 400);
});