有方向的鼠标悬停效果,jquery+css

demo地址

原文链接

使用方法:

$('#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, left
hide

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, left
setOptions

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);