Javascript 鼠标悬停动画怪异的行为

我正在用jquery创建一个简单的动画

动画由鼠标悬停时向左滑动的div组成

这是我的html：

<div class="item">
    <div class="content" onmouseover="over(this)" onmouseout="out(this)">
        <div class="image">
            <img src="http://aranciamato.it/wp-content/uploads/2013/09/insetti-700x250.jpg" width="300"/>
        </div>
        <div class="text">
            Some useful content
        </div>
    </div>
</div>

这是css：

.item {
    position: relative;
    width: 300px;
    height: 107px;
    overflow:hidden;
}

.item .content {
    position: absolute;
    top:0;
    left:0;
    width: 600px;
    height: 107px;
}

.item .content .image {
    position:absolute;
    top: 0;
    left: 0;
}
.item .content .text{
    position:absolute;
    top: 0;
    left: 300px;
    width: 250px
}

.item {
    border: 1px solid black;
}

动画工作正常，但我注意到，如果在动画运行时将光标移到

.image

div的左边框上，它会暂停片刻，然后继续

我不知道如何更好地解释这一点，所以

---

我的问题是：为什么动画的行为是这样的？如何使动画继续而不暂停？

使用mouseenter和mouseleave

<div class="content" onmouseenter="over(this)" onmouseleave="out(this)">

---

改用mouseenter和mouseleave

<div class="content" onmouseenter="over(this)" onmouseleave="out(this)">

---

您的JSFIDLE正在为我工作。另外，最好使用jQuery提供的

$（el）.hover（）函数
，例如：

$('.content').hover(function() {
    // Mouseover
}, function() {
    // Mouseout
});

你的JSFIDLE为我工作。另外，最好使用jQuery提供的
$（el）.hover（）函数
，例如：

$('.content').hover(function() {
    // Mouseover
}, function() {
    // Mouseout
});

您可以在父元素（在本例中为.item）上使用悬停事件，并设置子元素（.content）的动画。如果您正在使用jQuery，只需使用.hover（）而不是这两个鼠标事件。
那么，您可以在父元素（在本例中为.item）上使用鼠标悬停事件并设置子元素（.content）的动画。如果您正在使用jQuery，只需使用.hover（）而不是这两个鼠标事件。
当您将光标移出图像
div
时，将触发
mouseout
事件-您移出图像-并调用
out
函数，使动画停止。紧接着触发
mouseover
事件-您在文本上移动-调用
over
函数

您将事件处理程序附加到
content
div，也就是说，每当事件在自身上激发时，以及当事件在其一个子体上激发时，都会调用它们

它使用
mousenter
和
mouseleave
的原因是浏览器对这些事件的处理方式不同。但请注意，并非所有浏览器都支持它们。
当您将光标移出图像
div
时，将触发
mouseout
事件-您移出图像-并调用
out
函数，使动画停止。紧接着触发
mouseover
事件-您在文本上移动-调用
over
函数

您将事件处理程序附加到
content
div，也就是说，每当事件在自身上激发时，以及当事件在其一个子体上激发时，都会调用它们

它使用
mousenter
和
mouseleave
的原因是浏览器对这些事件的处理方式不同。但请注意，并非所有浏览器都支持它们。
不确定是否会出现问题，但听起来您应该使用
onmouseenter/mouseleave
events：但最好在CSS中设置动画only@A.Wolff我的意思是这样的：不管怎样，你和安东的答案对我都有用，谢谢！Thx的视频，现在我明白你的意思了meant@A.Wolff也许我应该把它附加到问题上，我不是英国人，我不知道如何用语言解释这种行为你的英语似乎比我的好……；）你解释得很好，我只是不确定，不确定是否能解决你的问题，但听起来你应该使用
onmouseenter/mouseleave
events:但最好是在CSS中设置动画only@A.Wolff我的意思是这样的：不管怎样，你和安东的答案对我都有用，谢谢！Thx的视频，现在我明白你的意思了meant@A.Wolff也许我应该把它附加到问题上，我不是英国人，我不知道如何用语言解释这种行为你的英语似乎比我的好……；）你解释得很好，我只是不确定你是否在动画运行时尝试移动光标？您应该得到如下内容：。Anton answer为我工作很奇怪，我不明白。这对我来说很好。很高兴你把它解决了@反斜杠
悬停
是mouseenter/mouseleave
上的
的缩写，它的工作原理与安东的答案相同。但是当然，您需要从DOM元素中删除内联事件声明。在动画运行时，您是否尝试移动光标？您应该得到如下内容：。Anton answer为我工作很奇怪，我不明白。这对我来说很好。很高兴你把它解决了@反斜杠
悬停
是mouseenter/mouseleave
上的
的缩写，它的工作原理与安东的答案相同。但当然，您需要从DOM元素中删除内联事件声明谢谢，这很有效！我会尽快接受这个答案，让我接受吧，汉克斯，行了！我会尽快接受这个答案，让我接受吧