HoverGroup

docs

This class manages the mousing into and out of groups of DOM elements that may not share the same parents. Consider a drop down menu. The user mouses over the menu item and a drop down menu slides out below it. The user then moves their mouse from the menu item into the sub menu. After a moment, they move their mouse out of the submenu and the submenu hides. To do this we must monitor both the menu item and the submenu and keep the state as "hovered" while the user is doing either one. We must also allow for time for the mouse to move from one section to the next.

The HoverGroup class does this for you. Simply hand it a set of DOM elements to monitor and configure it to watch the events you want and then attach your methods to its onEnter and onLeave events.

new HoverGroup({
	elements: [$('block1'), $('block2')],
	onEnter: function(){
		$('block1').addClass('over');
		$('block2').show();
	},
	onLeave: function(){
		$('block1').removeClass('over');
		$('block2').hide();
	}
})