The jQuery hover event is interrupted by the child <input>. Is there any way around this? (chrome)

Question

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

Is there any way associated with the hover event to break with mousing over the <input> element in jQuery?

Is it eliminated only when switching from an element to a non-child element?

Here's the jsfiddle with a live example of the problem: 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 am returning to CSS, but it would be great if this animation worked :)

Update: fixed on Mac Chrome 11.0.696.65

But still a real problem for those who got between chrome updates.

Answer 1

It works:

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

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

It seems the problem is with .hover () and text input in Chrome (try your old code with button input type)

Answer 2

You may be able to solve this problem using event.stopPropagation () .

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