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 () {&nbsp; &nbsp; let _this = $(this).find(".item");&nbsp; &nbsp; if(_this.length > 0) _this.stop().animate({'fontSize': '60px'}, 400);});