js hover 事件代理問題

html結(jié)構(gòu):

<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因為是后端動態(tài)加載，因此只有使用事件代理。js的hover事件并不支持事件代理，如果想使用事件代理就必須使用mouseover與mouseout進行代替。但實際執(zhí)行結(jié)果為鼠標移入<div class="box">并無反應(yīng)，鼠標移入<div class="item"></div>才會有實際的動畫效果。哪里的問題呢？

補充：最終目的是鼠標移入box，item的字體動畫生效