jQuery hover event interrupted by child <input>. Is there a way around this? (chrome issue)
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.
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)
You might be able to solve this using event.stopPropagation().
$(this).children().hover(function(e) {
e.stopPropagation();
});
精彩评论