Javascript 更改jQuery Div悬停区域

我有一个jquery代码，它的工作原理如下。。。当您将鼠标悬停在一个块上时，一个新的div向上滑动，红色的block div淡出，然后当您离开悬停区域时，div向下滑动，红色block div淡出。一切正常，下面是JSFIDLE：

唯一的问题是，当新的div向上滑动时，显示“第一个项目需要向上切换”，如果鼠标悬停在该div上，该div应保持原位。相反，一旦鼠标离开“项目1”灰色块div的div区域，另一个div（即“第一个项目需要向上切换”）将消失

我试着通过CSS更改div的悬停区域，但没有成功

#coltab li:hover + #coltab ul li, #coltab ul li:hover {
display: block;
}

也许我做错了。但同样，当您将鼠标悬停在显示“第一项需要向上切换”的div上时，它应该可以正常工作。那个潜水艇应该呆在原地，不要滑下来。同样，这是jsfiddle，如果您有任何帮助，我们将不胜感激。：）

---

此外，如果你连续多次悬停在div上，就会出现跳跃，整个悬停功能甚至可能会出现混乱，如果有人能解决这个问题或对此有一个解释，那就太棒了。

改变你想要保持不动的div的z顺序，使其高于红色div。如果这在视觉上不可取，那么尝试使用一个z顺序更高的不可见div，与你想要保持不动的div的相同大小相匹配

---

跳跃仅仅来自于悬停的次数。我不知道这个问题的确切答案，但我想您可以使用“取消删除”来防止事件堆积。

我也是最近的Jquery爱好者，但我建议使用mouseenter和mouseleave方法。 mouseleave方法不会让事件降低到子级，希望它能起到作用

检查此处的示例演示：

---

Tc，Amit

如果你是这个意思的话，我也试着改变z指数。一个JSFIDLE就好了！：）谢谢你，阿米特。不幸的是，我不知道如何将此方法应用于我当前的代码。如果您能将此应用于我的JSFIDLE，那将是令人惊讶的！）