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

Javascript html5 front-end jquery

Mar.12,2021

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

Previous: How does vue add a carriage return event to a page?

Next: The JS print this object value is inconsistent with the property value of the print this object.