Implement jQuery’s hover() Method in MooTools

jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements.

The MooTools JavaScript

/* hover! */ Element.implement({ 'hover': function(fn1,fn2) { return this.addEvents({ 'mouseenter': function(e) { fn1.attempt(e,this); }, 'mouseleave': function(e) { fn2.attempt(e,this); } }) } });

We implement hover() which accepts to functions; one will be called on mouseenter and the other on the mouseleave event. Each function is passed the corresponding event.

The Usage

/* fade in and out on hover event */ $('hover-me').hover(function(e) { this.fade('out'); }, function(e) { this.fade('in'); });

This simple example usage makes use of element fading.