当悬停div从侧面滑入时如何实现滑鼠效应？

Question

我一直在看这个WordPress主题：wp

当一个瓷砖被悬停时，它看起来像一个半透明的div从鼠标进入的边缘滑过瓷砖。我认为可以使用一个div来实现这个功能，但我不知道它是如何从页面源代码中获得的。

我对html和css相当在行，但我的jQuery是相当基础的。我知道这有点开放，但是简单地解释一下所涉及的技术将是有帮助的。

编辑:想一想，不用钻研页面源代码--这就是我认为这种方法是如何工作的：

1. 每个瓷砖都有自己的半透明覆盖子div，上面有标题等等。
2. 每个覆盖div位于瓷砖div之外的某个位置。瓷砖上有overflow:hidden
3. 当鼠标悬停div时，我使用jQuery计算鼠标输入的哪一侧(如何？)
4. 然后，我将css类应用到覆盖div:顶部、底部、左侧或右侧。CSS将立即启动，将覆盖div定位在与之对应的瓷砖div边缘之外。
5. 然后，jQuery用动画偏移覆盖div，将其移动到瓷砖上。

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

Answer 1

他们正在使用这个- http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

我还启动了CSS的纯版本- http://codepen.io/seanjacob/pen/rmIcD。

Answer 2

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