Jquery hover hide/show: setTimeout clearTimeout
Jquery hover hide/show: setTimeout clearTimeout
HTML
<div class="link">link</div>
<div class="target">target</div>
CSS
.link { width:300px; height:30px; background:blue;}
.target { width:300px; height:300px; background:red; display:block; position: absolute; top:200px;}
JavaScript
(function() {
var time = 1000,
timer;
function start() {
$('.target').css('display', 'none');
}
function handlerIn() {
clearTimeout(timer);
$('.target').stop(true).css('display', 'block').show();
}
function handlerOut() {
setTimeout(function() {
$('.target').stop(true).css('display', 'none');
});
}
$(".link, .target").hover(handlerIn, handlerOut);
}());