js模拟鼠标点击事件_JS鼠标滑入滑出事件

一个很常见的交互，但由于从来没有自己代码实现过，浪费了一下午时间，整理总结一下这个坑。

具体需要实现的效果，如下：

这里演示的操作都没有点击动作，全部是鼠标滑入滑出效果。click事件实现这个功能是很简单的，毕竟常用。但是为了1：1还原效果，所以是要用鼠标滑入滑出事件。

mouseover 和 mouseout，是不是？一提到鼠标滑入滑出事件，下意识就想到了这两个。

坑就坑在这儿。

首先说一下这个交互的实现逻辑。仔细观察效果图，我的实现方案是：

1. 先在最外层放一个div，里面分两个div容器，子容器宽高和父容器相同。
2. 返回按钮一个容器，更多操作按钮一个容器，v-if控制。
3. 鼠标划入返回按钮时，显示更多操作按钮容器，隐藏返回按钮。
4. 鼠标滑出更多返回按钮的整个子容器时，才显示返回按钮，隐藏更多操作按钮容器。因为效果图上可以看出鼠标在更多操作按钮上方空白处滑动，页面并没有变化，超出一定宽高时，才进行恢复。

我为自己个一下子想到这么好的实现方案感到，妙啊。 当然我这里用的方法就是mouseover 和 mouseou