javascript – 悬停的不同悬停效果：左,右,上,下

2023年7月2日 229次阅读

我想我可能会遇到一个非常棘手的问题.

我正在制作我的投资组合网站,现在我对我的投资组合项目的悬停效果有疑问.

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

  </div>
</div>

当您将鼠标悬停在项目上时,悬停div来自上方.

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

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

映入眼帘,
Boaz Poolman

最佳答案基本上,你需要做的是以下几点;

>为项目创建父容器
>创建一个内部元素,它将是一个悬停效果,宽度为：0,高度为0;
>检查鼠标的方向
>根据方向,在内部元素中添加一个类来改变它的悬停效果(x的宽度,y的高度)

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

如果元素的初始鼠标位置是x：5和y：10并且新位置是x：20和y：10,则可以推断鼠标向右移动.

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

这是演示;