悬停对悬停的不同影响:左、右、上、下

Question

我想我可能有个很难回答的问题。我正在制作我的投资组合网站，现在我有一个关于投资组合项目的悬停效果的问题。JSFiddle。

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

  </div>
</div>

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

现在我的问题是:我希望悬浮div出现在您悬停div的一侧。

因此，如果您将div从左侧悬停，则悬停div将从左侧出现。如果您将div从右侧悬停，则悬停div将从右侧出现。上下也是一样的。

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

你好，波阿兹·波尔曼

Answer 1

从本质上讲，你需要做的是：

1. 为项创建父容器
2. 创建一个内部元素，这将是悬停效果的宽度:0和高度: 0；
3. 检查鼠标的方向
4. 根据这个方向，在内部元素中添加一个类，以改变它的悬停效果( x的宽度，y的高度)

要捕获鼠标的方向，当用户第一次悬停到您的元素时，您需要捕获它的位置。经过一段很短的时间后，再次抓住这个位置。比较这两个位置，您就可以得到鼠标进入元素的方向。例如；

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

这里有一个教程，指导你了解你需要知道的东西；

http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

这是演示

http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/