bootstrap的栅格使用出现的鼠标移入移出时bug

问题描述

使用BootStrap的栅格，在里面有一个功能，鼠标移入时，显示一个div，移出时隐藏div。但是这里鼠标移入时出现了显示bug，鼠标移动过快时也能正常显示。

主要代码

<div class="container-fluid" id="app">
	<div class="row"></div>
	<div class="row"></div>
</div>

显示效果

想要的结果
在第一个row里面定义了一个鼠标移入显示一个隐藏的div如图：

出现的问题
但是在当我定义了第二的一个row时出现了这样的问题：

可以发现，当鼠标在中间那个分界点时，直接隐藏了，没有达到预期值。
经检查发现，第二行在第一行的上层，所以当鼠标往下边移动时，鼠标移入的第二行内（也就执行了鼠标移出方法），div就隐藏了。
解决办法就是在被挡住的div加上一个层叠样式：z-index:10即可

添加z-index之前：

添加z-index之后：

总结

发现问题
最先，所有显示都是正常的（鼠标移入，移出），后面我在进行修改第一行的局部样式时才发现了这个bug（此时第二行已经添加很久了，自己没注意到问题）
问题解析
鼠标移入移出，本来还不能算做鼠标移出了元素，但是却执行了鼠标移出的方法
解决过程
查百度也不知道怎么描述这个问题，耗时几个小时后本来打算放弃了（主要想做点秒杀之类的高技术含量的东西），但是自己移入移出感觉有点火大（强迫症吧），就继续改。后面我在第二行添加背景色时，才发现层叠才是问题所在（一开始我是想解决bootstrap的 .row的宽度）
解决方法
将需要执行鼠标移入移出的那块区域加上一个层叠优先级：z-index=10使其比第二行更靠近用户。