Question

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

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

  </div>
</div>

当您将鼠标悬停在物品上时，悬停div来自上方。

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

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

电贺， Boaz Poolman

Answer 1

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

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

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

这是一个指导您完成所需知识的教程;

这是演示;