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().
Bootstrap Studio
The revolutionary web design tool for creating responsive websites and apps.
Learn more
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
Nice example for learning jQuery!
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!
@ Chris
You'll have to set the opacity to 0.4 on page load manually first. You can do this with the following line:
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.
@ Martin Angelov
Thanks for the help mate!
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
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?
Hey thanks for the tut. The demo link says 404 Not Found .. is there any demo ?
@ 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;
@ Al
We had some problems with our server. Everything is online now.
Nice article I like it. Could I ask some questions? How to do featured slideshow the same your blog work with wordpress?
Best Regard,
nice work.
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?
@ 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:
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:
Hope it became a bit clearer.