Jquery 如何在悬停div从侧面滑入时实现鼠标悬停效果

我一直在看WordPress的主题：

当一个磁贴悬停时，似乎一个半透明的div从鼠标进入的边缘滑过磁贴。我认为可以使用一个div来实现这一点，但我不确定查看页面源代码是如何实现的

我非常擅长html和css，但我的jQuery非常基本。我知道这是一个有点开放性，但一个简单的解释所涉及的技术将是有益的

---

编辑：考虑一下，不深入页面源代码，我认为这种方法可能会起作用：

每个瓷砖都有自己的半透明覆盖子div，上面有标题等

每个叠加div位于tile div之外的某个位置。tile具有

溢出：隐藏

当鼠标悬停在div上时，我使用jQuery计算出鼠标进入哪一侧（如何？）

然后我将css类应用于覆盖div：top、bottom、left或right。CSS将立即将覆盖div定位在tile div的相应边缘之外

jQuery然后用动画偏移覆盖div，将其移动到平铺上的位置

---

瓷砖将动态调整大小，因此需要jQuery根据瓷砖大小重新定义偏移量。

第一个想法：在mouseenter上，您可以开始进行数学运算，根据鼠标坐标确定输入边。然后，当您知道鼠标是否从上、右、下或左进入时，您可以执行必要的动画

他们正在使用此-

---

我还启动了一个仅CSS版本-

有趣！首先，每个磁贴都有自己的半透明divYes，PSCoder建议最好在悬停时添加div。然而，我们面临的问题是，div是否有正确的标题、标签等。下一个棘手的问题是让div滑入和滑出！谢谢，我稍后会给你一个惊喜。你的CSS看起来不错，但是：1。覆盖层与鼠标不在同一侧；2.覆盖图可以包含标题吗？太好了！我知道如何使用css输入文本，但不在鼠标的同一侧退出。