Question

I’m working on an orbit simulation and I’m just trying to add a little user interaction to th mouseenter and mouseexit events. You can see a working example here.

My on statement is:

$('.planet').on({
    'mouseenter': function() {
        pauseAnimation = true;
    },
    'mouseleave': function () {
        pauseAnimation = false;
    },
    'click' : function () {
        alert('click');
    }
});

but none of the events seem to be triggered. If it matters, I’m using the latest Chrome on a mac.

Answer 1

It’s a z-index issue. Add z-index: 1; to the .planet css section. Fiddle worked fine after that: http://jsfiddle.net/Pe87m/9/