jQuery 悬停事件被子 <input> 中断。有没有解决的办法？ （镀铬问题）

Question

更新：感谢下面的评论，它看起来像是特定于 chrome 的问题。

有没有办法通过鼠标悬停在 jQuery 中的 <input> 元素上来解决悬停事件？

只有在从元素到非子元素时才淡出？

这是一个 jsfiddle，其中包含该问题的一个活生生的例子： http://jsfiddle.net/2h2Jt/3/

$(".hover").hover(function() {
    $(this).stop(true, true).animate({backgroundColor:'#aaaaaa'}, 500);
}, function() {
    $(this).stop(true, true).animate({backgroundColor: 'transparent'}, 500);
});

我正在使用 CSS，但是让这个动画工作会很棒:)

更新：已在 Mac Chrome 11.0.696.65 中修复

但对于那些在 chrome 更新之间陷入困境的人来说仍然是一个真正的问题。

Answer 1

这行得通：

http://jsfiddle.net/2h2Jt/140/

$(".hover").mouseover(function() {
    $(this).stop().animate({
        backgroundColor: '#aaaaaa'
    }, 500);
}).mouseout(function() {
    $(this).stop().animate({
        backgroundColor: 'transparent'
    }, 500);
});

Chrome 中的 .hover() 和文本输入似乎存在问题（尝试使用按钮输入类型的旧代码）

Answer 2

您或许可以使用event.stopPropagation() 解决此问题。

$(this).children().hover(function(e) {
   e.stopPropagation();
});