How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
$('#da-thumbs > li').hoverdir();
// or with options
$('#da-thumbs > li').hoverdir({hoverDelay: 75, hoverElem: '.elem'});defaults: {
speed: 300, // Times in ms
easing: 'ease',
hoverDelay: 0, // Times in ms
inverse: false,
hoverElem: 'div'
}show
Show the hover element, after show method is triggered, hover don't show or hide on mouseenter and mouseleave.
You have to use hide method to bind mouseenter and mouseleave.
$('#da-thumbs > li').hoverdir('show'); // Default value top
// or with a specific direction
$('#da-thumbs > li').hoverdir('show','bottom'); // Possible value top, right, bottom, lefthide
Hide the hover element and bind mouseenter and mouseleave.
$('#da-thumbs > li').hoverdir('hide'); // Default value bottom
// or with a specific direction
$('#da-thumbs > li').hoverdir('hide','top'); // Possible value top, right, bottom, leftsetOptions
Allows you to change the options while the plugin is already running
$('#da-thumbs > li').hoverdir('setOptions', options);destroy
Unbind the plugin
$('#da-thumbs > li').hoverdir('destroy');rebuild
Bind the plugin
$('#da-thumbs > li').hoverdir('rebuild');
// or with options
$('#da-thumbs > li').hoverdir('rebuild', options);Licensed under the MIT License