Javascript 通过悬停或单击对象获取类元素在类数组中的位置

我目前正在做一个项目，我有不同的字符，当你把鼠标悬停在每个字符上时，会显示关于它们的信息。虽然我可以通过ID解决这个问题，但我想知道是否有任何方法可以使用给定的信息（比如使用indexOf）获取类中对象的位置

史蒂夫
詹姆斯
迈克`
我喜欢比萨饼
他是一位非常好的厨师
有一个家庭要照顾

当我将鼠标悬停在每个人的上方时，.peopleInfo中的文本将隐藏并显示（我已将该部分整理好）。每个人都按时间顺序与每个人同步（例如史蒂夫喜欢比萨饼）。

---

有没有一种方法可以让我把史蒂夫的索引放在他身上，通过悬停在他身上的方式来生成文本“喜欢比萨饼”？

你可以这样做：

$（（）=>{
const people=$（'.people div'）.toArray（）；
const peopleInfo=$（'.peopleInfo div'）.toArray（）；
$（'.people'）.on（'mouseenter'，'div'，（{target}）=>{
const info=peopleInfo[people.indexOf（target）]；
log（target.textContent、info.textContent）；
});
});
.peopleInfo{
显示：无；
}

史蒂夫
詹姆斯
迈克


我喜欢比萨饼
他是一位非常好的厨师
有一个家庭要照顾
您尝试过的JavaScript代码在哪里？我尝试过的所有JavaScript似乎都失败了，因此我认为添加它没有任何意义。您应该始终发布您尝试过的代码，因为它让我们更好地了解您正在尝试的内容。而且，您的尝试可能是正确的，但只需要我们修复一些小项目。
<div class="people"> 
<div>Steve</div>
<div>James</div>
<div>Mike</div>`
</div>

<div class="peopleInfo">
<div>Likes pizza</div>
<div>Is a very good chef</div>
<div>Has a family to look after</div>
</div>