如何实现悬停div从侧面滑入的鼠标悬停效果答案

【问题标题】：How to achieve mouseover effect where a hover div slides in from the side如何实现悬停div从侧面滑入的鼠标悬停效果
【发布时间】：2013-04-17 15:13:00
【问题描述】：

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

我非常擅长 html 和 css，但我的 jQuery 非常基础。我知道这有点开放式，但对所涉及的技术进行简要说明会有所帮助。

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

每个图块都有自己的半透明覆盖子 div，上面有标题等。
每个覆盖 div 都位于 tile div 之外的某个位置。瓷砖有overflow:hidden
当鼠标悬停在 div 上时，我使用 jQuery 计算出鼠标进入了哪一侧（如何？）
然后我将 css 类应用到覆盖 div：top、bottom、left 或 right . CSS 将立即启动以将覆盖 div 定位在 tile div 的相应边缘之外。
jQuery 然后用动画偏移覆盖 div 以将其移动到图块上方的位置。

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

【问题讨论】：

有趣！首先，每个图块都有自己的半透明 div
是的，正如 PSCoder 建议的那样，在悬停时append() div 是个好主意。然而，我们面临的问题是 div 具有正确的标题、标签等。下一个棘手的问题是让 div 滑入和滑出

【解决方案1】：

我还创建了一个纯 CSS 版本 - http://codepen.io/seanjacob/pen/rmIcD

【讨论】：

【解决方案2】：

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

【讨论】：