jQuery: How to Bind a Hover Event

To bind a hover effect, in other words a mouse over and mouse out event that goes together, to an element using standard jQuery is remarkably simple. As with any other bind declaration in jQuery, you simply identify the class, ID or element type using the standard $ notation, and then call the desired action function you want to bind to with the necessary function parameters.

Binding a hover function does however look a little different than a normal bind to say a click function in that it accepts two parameters – namely the function to carry out on the first mouse over event and then the second to execute on the mouse out action.

So in practice, binding a hover event would look like this:

$("li").hover( 
function() 
{ 
    $(this).addClass("hover"); 
}, 
function() 
{ 
    $(this).removeClass("hover"); 
}); 

(Note that we could have used toggleClass in the example above, but this way makes it easier to understand.)

And now you know.