Skip to content
This repository was archived by the owner on Dec 21, 2019. It is now read-only.
This repository was archived by the owner on Dec 21, 2019. It is now read-only.

mouseenter-like behavior #4

Description

@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/

Activity

  1. sebmarkbage commented on Jun 26, 2010

    @sebmarkbage
    Contributor

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

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

    OR

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

  2. oskarkrawczyk commented on Jun 26, 2010

    @oskarkrawczyk
    Author

    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.

  3. sebmarkbage commented on Jun 26, 2010

    @sebmarkbage
    Contributor

    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.

  4. oskarkrawczyk commented on Jun 27, 2010

    @oskarkrawczyk
    Author

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions