悬停效果不同：左，右，顶部，底部

我想我可能有一个非常困难的问题。我正在做我的投资组合网站，现在我有一个关于我的投资组合项目的悬停效果的问题。 JSFiddle 悬停效果不同：左，右，顶部，底部

<div class="item"> 
    <div class="item-hover"> 

    </div> 
</div>

在拨弄当您悬停悬停DIV来自上面的项目。

现在我的问题是：我希望悬停div从您悬停div的一侧出现。
因此，如果您将鼠标悬停在左侧，则悬停格将从左侧出现。如果您将鼠标悬停在右侧，则悬停格将显示在右侧。顶部和底部也是一样的。

我希望有人能帮我解决我的问题！

映入眼帘，波阿斯Poolman

欢迎来到Stack Overflow！寻求代码帮助的问题必须包含在问题本身**中重现它所需的最短代码**。尽管您已经提供了一个示例链接，但如果链接无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。 –

从本质上讲，你需要做的是以下;

要捕获的方向上的内部元件鼠标，当用户第一次进入你的元素时，你需要捕捉它的位置。经过很短的时间后，再次捕捉位置。比较这两个位置，你就可以得到鼠标进入元素的方向。例如;

如果该元素的初始鼠标位置是x: 5和y: 10和新的位置是x: 20和y: 10，可以推断的是，鼠标在rightward方向移动。

这里是一个教程，指导你通过你需要知道的;

这里是演示;

2016-02-26 13:45:22 Lewis

这工作完美！ D非常感谢：D –

回答