jQuery hover event interrupted by child <input>. Is there a way around this? (chrome issue)

Question

Update: thanks to the comment below, it looks like a chrome specific issue.

Is there a way around the hover event getting interrupted by mousing over an <input> element in jQuery?

Only fade out when going from element to non child element?

Here's a jsfiddle with a live example of the issue: 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);
});

I'm falling back on CSS, but it would be great to have this animation working :)

Update: Fixed in Mac Chrome 11.0.696.65

But still a real issue for those caught between chrome updates.

Answer 1

This works:

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

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

Seems there is an issue with .hover() and text input in Chrome (try your old code with a button input type)