如何延迟悬停显示“预览”div?
function showPreview() {
$(this).closest('li').find('.preview').show();
}
function hidePreview() {
$(this).closest('li').find('.preview').hide();
}
$(document).ready(function() {
// $(".imageGalleryAlbum li a img").hover(showPreview,hidePreview); // Option A
// $(".imageGalleryAlbum li a img").hoverIntent(showPreview,hidePreview); // Option B
$(".imageGalleryAlbum li a img").hoverIntent({ //Option C
over: showPreview,
timeout: 1000,
out: hidePreview
});
});
我尝试使用 jQuery.hoverIntent 插件,但是对于大量图像,超时显示同级“li”“.preview”div。
此外,在“.imageGalleryAlbum li a img”中移动鼠标可能会导致“预览”div 显示和隐藏。这不是预期的效果。一旦显示“预览” div,它应该只在鼠标不再悬停在“.imageGalleryAlbum li a img”图像上时隐藏。
我创建了以下演示:http: //jsfiddle.net/9msxR/