jQuery hover is an incredibly versatile and useful shorthand function.

It’s sole purpose is to merge the mouseenter and mouseleave events together.
Why? it saves decleration. Whereas previously you may have create two code blocks, for the enter and leaves event respectively now they can be declared in a single block.

How it works:

The old way would see us creating two separate events

$(this).mouseenter(function() {
something happens when the mouse enters
});

$(this).mouseleaves(function() {
something happens when the mouse leaves
});

The .hover() way:

$(this).hover(
function(){something happens when the mouse enters},
function(){something happens when the mouse leaves}
);

.hover()  has two functions passed into it. Self explanatory but for absolute clarity, the first function is everything that will happen when the mouse enters $(this), the second function occurs when the mouse leaves $(this).

Some may look at this and feel that this isn’t actually saving all that much time. I am still having to pass two sets of actions against the element, why is it better?

If we were turn this into a function – reusable code, we will only ever have to declare the interactivity attributes once. They can then be assigned to any number of elements.

Now we can see we are going to make some serious gains in terms of coding.