MicroTut: The jQuery Hover Method

MicroTut: The jQuery Hover Method

When building a navigation menu, or any other jQuery script, it is often necessary to have a robust method with which to define a mouse over and mouse out state. This is where the hover() method comes along. Here is how it is used:

$('.selectorClass').hover(
function(){
	$(this).stop().fadeTo('slow',0.4);
},
function(){
	$(this).stop().fadeTo('slow',1);
});

This assigns the first function to be executed when the mouse moves above the elements on the page, which share the selectorClass class name, and the second one is executed when the mouse moves away.

You can use “this” inside of the functions, to access the element that triggered the event.

Hover actually binds the first function to the mouseenter event, and the second one to mouseleave, so you could alternatively write this:

$('.selectorClass').mouseenter(function(){
	$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
	$(this).stop().fadeTo('slow',1);
});

As of version 1.4 of jQuery, it is now possible to pass a single function to hover, which will be called on both mouseenter and mouseleave. This way you can shorten your code even more by writing only one function:

$('.selectorClass').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

The example above increments this.check every time the function is run. Depending on whether the number is even or not, it chooses the opacity level to pass to fadeTo() (1 being completely visible).

This is also a great place to use the jQuery toggle functions like .slideToggle() and .toggleClass().

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

13 Comments

  1. David Moreen says:

    It took me a while to start to incorporate the .stop() function to my hover events, ever since I started it is a use addition!must

  2. Lam Nguyen says:

    Nice example for learning jQuery!

  3. Chris says:

    How would you switch these round so the opacity was set to 0.4 at the start, and then on the hover event changed to 1?

    Sorry if this is obvious, im only a few days into jQuery!

  4. Martin Angelov says:

    @ Chris

    You'll have to set the opacity to 0.4 on page load manually first. You can do this with the following line:

    $('.selectorClass').css('opacity',0.4);

    The line above should go into your $(document).ready().

    After this you can copy one of the three methods above, just switch the places of 0.4 and 1.

  5. Chris says:

    @ Martin Angelov

    Thanks for the help mate!

  6. Fernandos says:

    Hi Martin :)

    Hey the jQuery 1.4 way of appyling a hover state is new to me.
    You could write a follow up micro-tutorial that would fit very well to this tutorial about using the hover state on a real menu.

    I've already done this last year on my page, look at the menu and the footer. Especially the catalgue button is nice. I think users would like to see how this is done with an actual menu or an item.
    (the url http://www.fif-moebel.de )

    Also I'd like to mention http://colorpowered.com/blend/ which is a better implementation of the hover state, because it allows nice degradations. though I've achieved good degradation too, but for the cost of extra css.

    cheers
    Fernandos

  7. Andreas says:

    I have some concerns about this.check and memory leaks. Is this the proper way to do it instead of using the jquery data methods?

  8. Al says:

    Hey thanks for the tut. The demo link says 404 Not Found .. is there any demo ?

  9. Martin Angelov says:

    @ Fernandos

    Those are some interesting menus. A jQuery navigation menu with the hover method might actually make it into a full tutorial, and not just a micro one : )

    @ Adreas

    You shouldn't be worried about memory leaks with this example. If, however, you are uncomfortable with leaving the variable increment without a limit, you can add this line below this.check = this.check || 1;

    this.check%=2;

    @ Al

    We had some problems with our server. Everything is online now.

  10. sophy says:

    Nice article I like it. Could I ask some questions? How to do featured slideshow the same your blog work with wordpress?

    Best Regard,

  11. Deoxys says:

    Can someone explain me this line?
    this.check = this.check || 1;

    What does it do in normal English language? ;-)

    I always thought that || only exists in IF and Co.... what does it do here?

  12. Martin Angelov says:

    @ Deoxys

    The OR operator has the following meaning - "if the left-hand side argument is false, null or undefined, use the right one". It can be used outside of an IF statements with the same meaning.

    In the line:

    this.check = this.check || 1;

    we tell JS to assign to this.check its own value if it exists (practically remain the same), otherwise assign 1 (which happens the first time the function is run because then this.check is undefined).

    It would be the same as:

    if(this.check == undefined) this.check=1;
    

    Hope it became a bit clearer.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links