交互内容超出范围外的鼠标移入显示移出隐藏

最近做项目的时候，遇到这么一个需求，要求列表中左侧（红框中）的内容在鼠标移入这个li显示，鼠标移出时隐藏。

 

 

一、最初的想法和出现的问题

 

这不就是给li添加mouseenter和mouseleave事件嘛，直接mouseenter的时候让左边内容显示，mouseleave的时候让左边内容消失。

 

但是，显然，仅仅这样做是不够的，问题来了，左边的交互内容根本不可达！还没等鼠标移到左侧交互内容，它就消失了！因为左侧内容是用绝对定位定在左侧的，但实际上它的范围超出了li的范围，所以当把鼠标移入左侧交互内容时，实际上已经出了li的范围，触发了mouseleave事件，左侧内容直接隐藏了。

二、探索解决办法

 

经同事外号哥提醒，当鼠标移出li的时候，可以用定时器不要让左侧内容马上消失，而是等一段时间再消失，以便让用户有时间移到左侧内容区块。于是，尝试如下。

1、定义一个isOut变量，鼠标移出li时用定时器控制

 

定义一个isOut变量，来标识鼠标是不是在有效区块（li区块或者左侧内容区块为有效区块），如果在有效区块的话，则鼠标移出li时左侧内容不消失，否则左侧内容消失，代码如下。

 

但是这样做并没有取得预想中的效果，出现了问题。鼠标单纯的移入这个li，移出到其他区块（不是这些绑了mouseenter和mouseleave的li）的时候，是没问题的。但是，只要鼠标在这几个绑了mouseenter和mouseleave的li中切换，问题就来了，全部li的左侧内容均显示，没有消失。原因就是所有的li绑定的事件都是共用了一个isOut变量。只要鼠标在这些li中，isOut变量都为false，即所有的li左侧内容均显示。

2、定义一个isOut数组，用来标识鼠标是不是在当前li的有效区块，鼠标移出li时用定时器控制

 

一个变量是没有办法的，那么只有用一个数组了，用isOut数组来标识每一个li的状态，以便左侧内容区块的正确显示和消失，如此，问题便解决了，代码如下。