Javascript JS mouseover函数在im悬停特定div时不重置

我有一个小动画正在工作，但不是我想要的，当我悬停其中一个三角形时，它会带来一个隐藏的div，我希望当我悬停三角形或隐藏div时，动画不会重置，希望我能让我理解

动画如下所示：

$（函数（）{
$（'.arrow left'）.mouseover（函数（）{
$（'body'）。停止（true，true）。css（'right'，'auto'）。设置动画({
左：300
});
$（“#左内容”）.show（）；
});
$（'.arrow left'）.mouseleave（函数（）{
$（'body'）。停止（true，true）。css（'right'，'auto'）。设置动画({
左：0
});
$（“#左内容”）.hide（）；
});
$（'.arrow right'）.mouseover（函数（）{
$（'body'）。停止（true，true）。css（'left'，'auto'）。设置动画({
右：300
});
$（“#右内容”）.show（）；
});
$（'.arrow right'）.mouseleave（函数（）{
$（'body'）。停止（true，true）。css（'left'，'auto'）。设置动画({
右：0
});
$（“#右内容”）.hide（）；
});
});
#动画{
位置：相对位置；
身高：100%；
最小高度：100%；
背景图像：url（“http://i.imgur.com/rxks29H.jpg");
背景图像：无重复；
背景大小：100%；
}
#动画图像{
位置：相对位置；
身高：100%；
宽度：100%；
}
.左箭头{
填充：5%15px；
文本转换：大写；
位置：绝对位置；
宽度：14%；
左：0；
z指数：3；
最高：30%；
光标：指针；
}
.向右箭头{
填充：5%15px；
文本转换：大写；
位置：绝对位置；
宽度：14%；
右：0；
z指数：3；
最高：30%；
光标：指针；
}
.向右箭头h2{
字号：28px；
颜色：#FFF；
}
.向右箭头：悬停h2.向左箭头：悬停h2{
颜色：#DDD；
文字装饰：下划线；
}
.左箭头h2{
字号：28px；
颜色：#FFF；
}
身体{
位置：相对位置；
}
.隐藏{
显示：无；
}
#左内容{
左：-300px；
高度：400px；
位置：绝对位置；
前-30%；
宽度：300px；
}
#正确内容{
右：-320px；
高度：400px；
位置：绝对位置；
前-30%；
宽度：300px；
}

搜寻公司
正确内容
一段到这里一段到这里

一段到这里一段到这里

一段到这里一段到这里

寻求想法
左内容
一段到这里一段到这里

一段到这里一段到这里

一段到这里一段到这里

使用事件而不是鼠标悬停

$(function() {
    $('.arrow-left').mouseenter(function() {
        // ...
    });
});

请修复
Fiddle
链接。它仍然会这样做，在隐藏的div上，如果我移动鼠标，它会重置。我想我明白你的意思了。如果我是对的，问题是隐藏的div和三角形没有接触，因此有一个时刻光标不在它们上面，导致动画重置。要解决此问题，请在隐藏的div中添加一些填充，以便元素相互接触