The jQuery API method of .hover() allows you to make things happen when the visitor moves the cursor over an element and can make something else happen when the cursor is mover off the item. It is a shorthand way of expressing the .mouseenter() and .mouseleave() events.

The syntax for .hover() is:

$("selector").hover(handlerIn, handlerOut);

The handlerIn and handlerOut are expressed as function(){...} as in the following example:

    $(this).animate({ width: "200px" },1000);
    }, function() {
    $(this).animate({ width: "100px" },1000);

The HTML for this example:

<div class="navbar1" style=""></div>
<div class="navbar2" style=""></div>
<div class="navbar3" style=""></div>

The result: