Javascript 彩色动画jQuery插件:父元素和子元素的动画触发器。如何解决这个问题?

Javascript 彩色动画jQuery插件:父元素和子元素的动画触发器。如何解决这个问题?,javascript,jquery,coloranimation,Javascript,Jquery,Coloranimation,就在昨天,我才需要为HTMLdiv的边框颜色设置动画,并从中发现了彩色动画jquery插件。它是轻量级的,使用简单,但它似乎有一个错误。 我有以下一段HTML: <div class="object-list-item" id="oli-0" reference="0"> <div class="close_btn" tooltip_text="Remove this object"></div> <img class="thumb" s

就在昨天,我才需要为HTML
div
的边框颜色设置动画,并从中发现了彩色动画jquery插件。它是轻量级的,使用简单,但它似乎有一个错误。 我有以下一段HTML:

<div class="object-list-item" id="oli-0" reference="0">
    <div class="close_btn" tooltip_text="Remove this object"></div>
    <img class="thumb" src="img/text-icon.png" />
    <div class="text-preview"></div>
    <div class="clear"></div>
</div>
我还制作了一把小提琴,你可以看到这种行为:


问题是,当我悬停任何内部元素时,事件处理程序也会为它们触发。我该怎么解决这个问题呢?

我现在很懒,但我很确定你只需将
mouseover,mouseout
更改为
mouseenter,mouseleave


我现在很懒,但我很确定你只需将鼠标移到
mouseover,mouseout
就可以了
mouseenter,mouseleave


您也可以尝试将其改为
悬停
-

$('div.object-list-item').hover(function(){
    $(this).animate({ borderColor : "#555" },300);
}, function(){
    $(this).animate({ borderColor : "#ddd" },300);
});

至于“为什么”-的答案解释得很好,并链接到,您也可以尝试将其改为
悬停-

$('div.object-list-item').hover(function(){
    $(this).animate({ borderColor : "#555" },300);
}, function(){
    $(this).animate({ borderColor : "#ddd" },300);
});

至于‘为什么’——的答案解释得很好,并链接到

那只是……奇怪……它确实解决了问题,但为什么?!这对我来说没有任何意义。@AndreiOniga再次懒惰,但你可以在这里找到答案:这只是…奇怪…它确实解决了问题,但为什么?!这对我来说没有任何意义。@AndreiOniga再次懒惰,但你可以在这里找到答案:好吧……你和Andreas的建议似乎都有效(至少在Chrome中),但为什么?!这对我来说没有任何意义,对我来说只是可怕的怪异。嗯,现在这已经解决了,这实际上产生了一个新的问题:当我悬停子元素时,边框会变回原来的位置,就像我离开父元素一样。这不需要发生,在用户完全离开父元素之前,边框应该保持黑暗,但不能早于此。你知道怎么解决这个问题吗?答案中的小提琴和我的小提琴在你离开父母之前都不会褪色。我遗漏了什么吗?确实,但是我需要使用
on()
方法将处理程序绑定到新添加的元素。如何使用()上的
on
,绕过当前问题显然不是:(好吧……你和安德烈亚斯的建议似乎都奏效了(至少在Chrome中是这样),但是为什么?!这对我来说没有任何意义,对我来说只是可怕的怪异。嗯,现在这已经解决了,这实际上产生了一个新的问题:当我悬停子元素时,边框会变回原来的位置,就像我离开父元素一样。这不需要发生,边框应该一直保持黑暗,直到用户离开父元素元素,但不早于此。您知道如何解决此问题吗?答案中的小提琴和我的小提琴在您悬停在父元素之外之前不会褪色边框。我是否遗漏了什么?确实,但我需要使用()
方法,以便将处理程序绑定到新添加的元素。如何使用()上的
解决当前问题?
-显然不是:(
$('div.object-list-item').hover(function(){
    $(this).animate({ borderColor : "#555" },300);
}, function(){
    $(this).animate({ borderColor : "#ddd" },300);
});