js hover 事件代理问题

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的字体动画生效

阅读 4.7k
1 个回答
$('.box').on('mouseover', function () {
    let _this = $(this).find(".item");
    if(_this.length > 0) _this.stop().animate({'fontSize': '60px'}, 400);
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题