Your generous donation allows me to continue developing and updating my code!
Here are some simple hover intent examples, utilizing doTimeout. For more usage examples, also see the doTimeout plugin page.
Hover intent on individual items (250ms delay)
$('#item-over a').hover(function(){
$(this).doTimeout( 'hover', 250, 'addClass', 'hover' );
}, function(){
$(this).doTimeout( 'hover', 250, 'removeClass', 'hover' );
});
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
Hover intent on a group of items (250ms delay)
$('#items-over a')
.mouseenter(function(){
$.doTimeout( 'hover', 250, function(elem){
$('#items-over-text').html( $(elem).html() );
}, this);
})
.mouseleave(function(){
$.doTimeout( 'hover' );
});
Hovered over: ???
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
Hover intent on a nav / subnav (250ms delay)
$('ul.main-nav').each(function(){
var nav = $(this);
nav
.mouseover(function(e){
nav.doTimeout( 'main-nav', 250, over, e.target );
}).mouseout(function(){
nav.doTimeout( 'main-nav', 250, out );
});
function over( elem ) {
var parent = $(elem).closest( 'li.main-nav' );
out( parent );
parent.children( 'a' ).addClass( 'hover' );
parent.children( 'ul:hidden' ).slideDown( 'fast' );
};
function out( elem ) {
var parents = elem
? $(elem).closest( 'li.main-nav' ).siblings()
: nav.children();
if ( nav.is( '.main-nav-horizontal' ) ) {
parents = parents.not( '.active' );
}
parents.children( 'a' ).removeClass( 'hover' );
parents.children( 'ul' ).hide();
};
});
Sample Content
Sample Content
Sample Content
Sample Content
Sample Content
Sample Content