Javascript 如何通过将鼠标悬停在同一页面上的图像上来触发css动画按钮

我的网站有问题。在主页上我有一张图片。在图像的顶部是一个css动画按钮，它在按钮滚动时设置动画

我需要做的是翻转图像和按钮，它会触发动画。目前，只有在实际按钮滚动时，它才会设置动画

动画是纯css的，但我假设我必须使用Javascript来触发它，但我不确定如何编写它

以下是我的html：

<span class="overlay"></span> - (this is the image)
<span class="button-hover" data-text="@item.Name"><span>@item.Name</span></span> -   (this is the button)

---

我不知道我是否做对了，但是。。。尝试将这行代码添加到css中

.overlay:hover .button-hover{
   line-height: 9em;
}

---

类似问题：

提供css目前是如何完成的，并提供HTML的重要部分，谢谢！我刚刚用我的html和css更新了它

.overlay:hover .button-hover{
   line-height: 9em;
}