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

Question

我想我可能有一个非常困难的问题。 我正在制作我的个人作品集网站，现在我对我的作品集项目的悬停效果有疑问。

JSFiddle

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

  </div>
</div>

当你在小窗口上悬停鼠标时，悬停的 div 会从上方出现。 我的问题是：我希望悬停的 div 能够从你悬停的方向出现。
所以，如果你从左边悬停 div，则悬停的 div 将从左边出现。如果你从右边悬停 div，则悬停的 div 将从右边出现。对于顶部和底部也是同样的情况。 我希望有人能帮助我解决这个问题！ 问候， Boaz Poolman

- Boaz Poolman

---

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

Answer 1

基本上，你需要做的是以下步骤:

1. 创建项目的父容器
2. 创建一个内部元素，它将成为悬停效果，并具有宽度: 0和高度: 0;
3. 检查鼠标的方向
4. 根据方向，向内部元素添加类来更改其悬停效果（对于x轴为宽度，对于y轴为高度）

为了捕获鼠标的方向，当用户首次将鼠标悬停在您的元素上时，需要捕获其位置。经过很短的时间后，再次捕获位置。比较这两个位置，就可以得到鼠标进入元素的方向。例如;

如果元素的初始鼠标位置为x：5和y：10，新位置为x：20和y：10，则可以推断出鼠标向右移动。

以下是指导您完成所需内容的教程： http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/ 以下是演示； http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/

- Lewis