Javascript jQuery-Mouseenter/Mouseleave父/子问题

我有一个父div和多个子div。父div在鼠标上方有一个悬停事件，它在dom上显示一些文本。子div也具有相同的功能

我试过mouseover/mouseout和mouseleave等，但它们不太适合我的使用

当您将鼠标悬停在父对象上时，dom中将显示消息“foo” 当您将鼠标悬停在子对象上时，dom中将显示消息“bar” 将鼠标悬停回父对象而不离开父对象时，不会显示任何消息。在这一点上，我希望它被重置为具有与最初相同的功能

请问，实现这一目标的最佳方式是什么？因为我不想重新排列dom，因为这会非常耗时

谢谢

这是一个猜测，但这个（或类似的东西）可能会如你所描述的那样

$（函数（）{
var disabled=false；
var theMessage=$（“#theMessage”）；
$（“#家长”）。在（“鼠标悬停”，函数（e）{
如果（e.target.id==“孩子”）{
message.text（“条”）；
禁用=真；
}否则，如果（！已禁用）{
text（“foo”）；
}
}).on（“鼠标出”，功能（e）{
如果（e.target.id==“当事人”）{
禁用=错误；；
}
message.text（“…”）
});
});
#图片{宽度：200px；高度：200px；背景：红色；位置：相对；}
#儿童{位置：绝对；顶部：0；右侧：0；底部：0；左侧：0；边距：自动；宽度：100px；高度：100px；背景：蓝色；}

...

似乎是赢家
 我必须这样做，以使箭头最初隐藏，然后仅在悬停状态下显示。
使用此滑块
（迄今为止我找到的最好的一个）

我们无法猜测1）您的html，或2）您用于与html交互的脚本。显示足够的代码来重现issueSorry-我认为本地jquery示例对于mouseover/out来说足够清晰-下面的回复有正确的代码示例-它只需要按照我在回复中提到的注释来工作。完全一样，但是当您从子对象移动到外部时，我希望Foo再次显示，如果我返回到子对象而没有离开父母时，我想再次向他们表示感谢——感谢我的回答。见v3。
e.preventDefault();
e.stopPropagation();

$('.swiper-button-next, .swiper-button-prev').addClass('hide');
    var hoverArrows = function(){
        console.log("hoverArrows")
        $('.swiper-wrapper, .swiper-button-next, .swiper-button-prev').mouseenter(function () {
            console.log("hovered")
            $('.swiper-button-next, .swiper-button-prev').removeClass('hide');
        }).mouseleave(function () {
           $('.swiper-button-next, .swiper-button-prev').addClass('hide');
        });
    }
    hoverArrows();