Strange behavior of performing mouseover over a textarea in Chrome

I have a strange problem I can't wrap my head against. It is present only in Chrome. The library I'm using is Prototype 1.6.

Basically, I have two elements wrapped into a container element. First of the two children elements is visible, the second one is hidden. Inside the hidden element I have a textarea element. When I mousover the container element, the first child should hide, second on开发者_StackOverflow中文版e should show itself. When I mouseout, the behavior should be opposite. You can see it here, along with the bug :)

http://jsfiddle.net/gmM9m/2

For some reason, in Chrome when I mouseover the textarea, the elements start blinking because they constantly turn themselves on and off. Does anyone have any idea what causes this behavior and how can I circumvent it?

Thank you! Luka

The closest I've gotten is adding the event to the callback function for the mouseout and making sure that it's coming from the element you want. It seems kind of hackish, but perhaps it's a bug in Chrome. I'm seeing it as well, but wong2 does not seem to be seeing it.

See my revision, still a slight stutter on initial mouseover.

http://jsfiddle.net/gmM9m/10/

I just run into similar problem and solved it with using jquery "mouseenter" and "mouseleave" event see http://api.jquery.com/mouseenter/

This works for me.(I'm not familar with JQuery's observe method, so I use JavaScript's addEventListener instead)

$('container').addEventListener("mouseover", function(event){
    $('front').hide();
    $('back').show();
    event.stopPropagation();
}, false);

$('container').addEventListener("mouseout", function(event){
    $('front').show();
    $('back').hide();
    event.stopPropagation();
}, false);

The point is stopPropagation. Run it here: http://jsfiddle.net/RDXzR/