Implement jQuery’s hover() Method in MooTools

By  on  

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.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Multiple Background CSS Animations

    CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.  I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with...

  • By
    Duplicate the jQuery Homepage Tooltips Using MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

Discussion

  1. Sorry Bro, but this is completely useless. There is no need for a “hover”-method with a sloppy API like jQuery has (there is clearly no point in “argument one is hover event and argument two is the mouseout event”).

    After all, the mootools approach isn’t really significantly more to write but it gives you more flexibility and more meaningful code:

    el.addEvents({
      mouseenter: fn,
      mouseleave: fn2
    });
    

    Also, by doing it the “mootoolsian”-way you can remove the events if you want or need to by doing el.removeEvent('mouseenter', fn).

  2. @Chris

    I like this, but after reading your reply I do agree with you. The reason why I like it is that it shows how flexible MooTools is — There is [almost] nothing that MooTools cannot do that other libs can. The thing that makes hover() less MooTools and more jQuery is the autobinding.

    Great post though.

  3. MooTools automatically binds every function to the element unless the function is bound already.

    Consider this example:

    var fn = function(){ console.log(this); };
    el.addEvent('click', fn);
    el.addEvent('click', fn.bind(someOtherElement));
    

    The first example will log the element and the second one will be bound to “someOtherElement”. We have it all!

  4. I see your point guys — I created this because it simply gives the dev a shorter way to accomplish something. It may also help jQuery users who are moving to Moo by making things a little bit more simple.

  5. Chris, that would be true if David’s code was written as it were in your first post, but the function with the action is enclosed inside of the anonymous (already bound) function.

  6. Damn Lim, I had forgotten about Mooj. You need to do a series of articles on that thing.

  7. Corey

    Chris, you can do the same in jQuery also, you don’t have to use hover().

    el.mouseover(fn).mouseout(fn2);
  8. As an exercise in demonstrating how easy it is to add your own syntax to MooTools, I think this post is totally fine and appropriate. None of us would ever do this for all the reasons pointed out in the comments above.

    My only comment is that it should return this for chaining:

    Element.implement({
        'hover': function(fn1,fn2) {
            return this.addEvents({
                'mouseenter': function(e) {
                    fn1.attempt(e,this);
                },
                'mouseleave': function(e) {
                    fn2.attempt(e,this);
                }
            })
        }
    });
    
  9. So I have to throw in my $0.02US —

    I implement this for Dojo based on the same “wow, why do people get so excited about an API that already exists” … but I changed the .hover() API some:

    hover: function(over, out){
         return this.onmouseenter(over).onmouseleave(out || over);
    }
    

    allowing you to do one function for both states:

    dojo.query(".blah").hover(function(e){ 
      // is e.type mouseover or mouseleave ? decide
    });
    

    Though I put it in my “mini lib” plugd:

    http://code.google.com/p/plugd/

    I even submitted a patch to jquery because I think the single function use makes sense and is even more ‘rockstar’ than two inline functions:

    http://dev.jquery.com/ticket/3498

    Regards,
    Peter Higgins

  10. It has potential! Got some idea, will share when finnished.

  11. Hello. I’am looking for this jQuery-Function in Mootools. Any Idea?

    $(document).ready(function() {
    
    $(".commentBox").hover(
      function() { $(this).find(".commentDate").css({'display' : 'inline'}); },
      function() { $(this).find(".commentDate").css({'display' : 'none'}); }
    );
    });
    
  12. @joe This should do what you ask:

    window.addEvent('domready', function(){
        $(document.body).getElements('.commentBox').addEvents({
            'mouseenter': function(){
                this.getElement('.commentDate').setStyle('display','inline');
            },
            'mouseleave': function(){
                this.getElement('.commentDate').setStyle('display','none');
            }
        }) 
    });
  13. lossendae

    @Constantin:

    Which can be backported to jQuery

    $('document').ready(function(){
    $('.commentBox').bind('mouseenter mouseleave',function(){
    $(this).find('.commentDate').css({‘display’ : ‘inline’});
    },'mouseleave',function(){
    $(this).find('.commentDate').css({‘display’ : ‘none’});
    })
    });
    

    It’s not because jQuery has shortcuts that you must use them.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!