Javascript 当光标不在父对象上时隐藏悬停元素

我的项目中有多个

内联块

元素

这些元素中的每一个都有一个隐藏的“工具提示”，当您将鼠标悬停在这些元素上时会显示该提示

但是，如果光标放在工具提示上，该工具提示将不会隐藏。因此，要查看下面另一个元素的工具提示，您必须首先将光标移开并移开，这对用户不太友好

为了更好地说明我的问题，我制作了一个片段。我想要的是，只要光标不在红色框上，就立即隐藏

悬停元素

我不认为只有CSS就有办法，所以任何JavaScript/jQuery解决方案都是非常受欢迎的

li{
显示：内联块；
背景色：红色；
宽度：100px；
高度：25px；
右边距：10px；
位置：相对位置；
}
.悬停元素{
位置：绝对位置；
背景颜色：黄色；
z指数：9999；
宽度：350px；
高度：175px；
左：50%；
左边距：-175px；
顶部：25px；
显示：无；
}
悬停，悬停元素{
显示：块；
}

在悬停时的

悬停元素

上添加

可见性：隐藏

属性

li{
显示：内联块；
背景色：红色；
宽度：100px；
高度：25px；
右边距：10px；
位置：相对位置；
}
.悬停元素{
位置：绝对位置；
背景颜色：黄色；
z指数：9999；
宽度：350px；
高度：175px；
左：50%；
左边距：-175px；
顶部：25px；
显示：无；
}
悬停，悬停元素{
显示：块；
}
.悬停元素：悬停{
可见性：隐藏；
}

li{
显示：内联块；
背景色：红色；
宽度：100px；
高度：25px；
右边距：10px；
位置：相对位置；
}
.悬停元素{
位置：绝对位置；
背景颜色：黄色；
z指数：9999；
宽度：350px；
高度：175px；
左：50%；
左边距：-175px；
顶部：25px；
显示：无；
}
悬停，悬停元素{
显示：块；
}
li.hover元素：hover{
显示：无；
}

用户是否需要与工具提示内容交互？想知道在你的情况下，点击显示工具提示比悬停更方便用户吗？不。没有互动。这就是为什么我用悬停。泰蒂。我不想今天罢工。我应该自己解决：）我会在4分钟内给你积分，因为你的答案是第一个。这同样有效，但必须给第一篇文章提供“正确答案”。解决方案不同，但取决于年轻人。这也行，但必须给第一篇文章“正确答案”。我迟到了一点

.hover-element {    
    pointer-events: none;
}