mouseenter-like behavior

[oskarkrawczyk]

Hey, I was poking around with an idea of a button that animates when hovering over, but seems like what's really needed is a mouseneter-like behavior. Here's the scenario:

The button has a ellipse background and an icon in the middle of it - they are not a group since I only need to animate the ellipse. I'm attaching a listener to the canvas hoping the whole canvas will be a hot-spot, instead the ellipse, and the icons are (separately). You can notice the flickering when moving your mouse.

See this example: http://jsfiddle.net/oskar/A5cmN/

[sebmarkbage]

You can use MooTools on the ART objects for this like so:

$(art).addEvents({ mouseenter: ..., mouseleave: ... });

OR

Element(art).addEvents({ mouseenter: ..., mouseleave: ... });

[oskarkrawczyk]

To much of a performance overhead to extend the ART object with Element by default?

Your solution kind of works, it's still buggy but a lot better than using listen - if you move your cursor too fast, it won't even pick up the mouseleave event, same if you move your cursor to the white icon to fast.

[sebmarkbage]

hm... ok. Might be some browser specific issues.

The ART object isn't actually extended. It's cast to the underlying DOM element which is extended. ART is essentially independent of MooTools which is nice for adoption.

[oskarkrawczyk]

Got it. When I think about ART, I immediately think about "MooTools-art", which is simple not the case anymore. Thanks for clarification.

This mouseenter/mouseleave issue needs further investigation. I'll try to poke around with it a little bit and update this ticket if anything comes up.