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

Question

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

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

  </div>
</div>

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

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

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

您好，波阿斯·普尔曼

Answer 1

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

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

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

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

这是演示；

Different hover effects on hover from: left, right, top, bottom