我一直在看这个 WordPress 主题:http://themes.thunderbuddies4life.com/?theme=longwave_wp
当图 block 悬停时，似乎有一个半透明的 div 从鼠标进入的边缘滑过图 block 。我认为单个 div 可以用于此目的，但我不确定通过查看页面源代码是如何实现的。
我很擅长 html 和 css，但我的 jQuery 非常基础。我知道这有点开放式，但对所涉及的技术的简要解释会有所帮助。
编辑:思考一下，无需深入研究页面源代码，我认为该方法可能会起作用:
- 每个图 block 都有自己的半透明覆盖子 div，上面有标题等。
- 每个覆盖 div 都位于图 block div 之外的某个位置。该图 block 具有
overflow:hidden - 当鼠标悬停在 div 上时，我使用 jQuery 计算出鼠标进入哪一侧(如何？)
- 然后，我将 css 类应用到覆盖 div:顶部、底部、左 或右 。 CSS 将立即将覆盖 div 定位到平铺 div 相应边缘的外侧。
- 然后 jQuery 使用动画偏移覆盖 div，将其移动到图 block 上方的位置。
图 block 将动态调整大小，因此需要 jQuery 根据图 block 大小重新定义偏移量。
最佳答案
他们正在使用这个 - http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/
我还启动了纯 CSS 版本 - http://codepen.io/seanjacob/pen/rmIcD
关于jquery - 如何实现鼠标悬停div从侧面滑入的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16063803/