Delegate-able Hover Events for jQuery

Thursday 27 May, 2010 by justinbmeyer

Want to use live and delegate with hover events? Now you can! We are releasing JavaScriptMVC's delegate-able hover plugin. This plugin only works for the current 1.4.3 nightly release.

Download

jquery.event.hover.js (minified 3kb)

Features

  • Listen to hover events with live, delegate, and bind
  • Customize hover behavior locally or globally

Demo

jQuery.Hover

Documentation

jQuery.Hover

Use

Bind, delegate, or use live on any of the following events:

  • hoverinit - called on mouseenter, use this event to customize delay and.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

Example:

// listen for hover on 'option's in a menu
$('#menu').delegate(".option","hoverenter",function(){
  $(this).addClass("hovering");
})
// when the mouse leaves restore
.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)
})

Subscribe to:

Related Content

Copyright ©2007-2010 Jupiter IT.