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);

});