Provides delegate-able hover events.

A hover happens when the mouse stops moving over an element for a period of time. You can listen and configure hover with the following events:

• hoverinit - called on mouseenter, use this event to customize jQuery.Hover.delay and jQuery.Hover.distance
• hoverenter - an element is being hovered
• hovermove - the mouse moves on an element that has been hovered
• hoverleave - the mouse leaves the element that has been hovered

Quick Example

The following listens for hoverenter and adds a class to style the element, and removes the class on hoverleave.

$('#menu').delegate(".option","hoverenter",function(){
  $(this).addClass("hovering");
}).delegate(".option","hoverleave",function(){
  $(this).removeClass("hovering");
})

Configuring Distance and Delay

An element is hovered when the mouse moves less than a certain distance in specific time over the element.

You can configure that distance and time by adjusting the distance and delay values.

You can set delay and distance globally by adjusting the static properties:

$.Hover.delay = 10
$.Hover.distance = 1

Or you can adjust delay and distance for an individual element in hoverenter:

$(".option").live("hoverinit", function(ev, hover){
//set the distance to 10px
hover.distance(10)
//set the delay to 200ms
hover.delay(10)
})

Demo

Constructor

Creates a new hover. This is never called directly.

new $.Hover() -> jquery.hover