悬停时的不同悬停效果：左、右、上、下

【问题标题】：Different hover effects on hover from: left, right, top, bottom悬停时的不同悬停效果：左、右、上、下
【发布时间】：2016-06-09 18:13:13
【问题描述】：

我想我可能有一个非常困难的问题。我正在制作我的投资组合网站，现在我对我的投资组合项目的悬停效果有疑问。 JSFiddle

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

  </div>
</div>

在小提琴中，当您悬停一个项目时，悬停 div 来自上方。

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

我希望有人可以帮助我解决我的问题！

您好，波阿斯·普尔曼

【问题讨论】：

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

【解决方案1】：

基本上，您需要做的是以下内容；

要捕获鼠标的方向，当用户第一次将鼠标悬停在您的元素上时，您需要捕获它的位置。在很短的时间后，再次占领该位置。比较这两个位置，您将能够得到鼠标进入元素的方向。例如；

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

这里有一个教程，可以指导您了解您需要了解的内容；

这里是演示；

【讨论】：