jQuery: Mouse hover event and callback

This entry is part 10 of 33 in the series jQuery Tutorial

We look at a rather interesting hover event that behaves similarly to the mouseover and mouseout events.

Inside the hover method, there are actually 2 functions.

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

<!doctype html>
    <title>hover demo</title>
        h3 {
            color: blue;
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                    function () {
                    }, function () {

Try The Code

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:


The first function above is for handlerIn and the second function is for handlerOut.

Callback Functions

The 2 functions are actually callback functions in Javascript/jQuery. Callback is a very important concept in jQuery. With callbacks, functions will run one after another or continuously.

In this case, first function will first run and after it’s done, it will come back and run the second function. That is probably how the name callback is derived.

We will comeback to callback in the later posts.