Js hover event proxy problem - Codes Helper - Programming Question Answer

Js hover event proxy problem

html structure:

<div class="box">
     <div class="item"></div>
     <div></div>
 </div>

js section:

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

problem: because the first div under box is dynamically loaded at the back end, only event proxies are used. Js"s hover events do not support event proxies, and if you want to use event proxies, you must use mouseover and mouseout instead. However, the actual execution result is that there is no response when the mouse is moved into < div class= "box" >, and the actual animation effect will be achieved only when the mouse is moved into < div class= "item" > < / div >. What"s the problem?

add: the ultimate goal is to move the mouse into the box,item font animation to take effect