jQuery实现鼠标悬停显示与延迟隐藏的定时器实例
作者:代码拾荒时间:2026-10-27 17:01:48浏览:431
本文通过jQuery代码实例,演示如何利用setTimeout和clearTimeout实现鼠标悬停时显示浮动面板,并在鼠标离开后延迟隐藏的功能。核心逻辑涉及对visible状态的判断、offset位置计算以及定时器句柄的管理,旨在解决悬停交互中常见的误触或闪烁问题。
jQuery鼠标悬停显示与延迟隐藏实现
具体实现代码如下所示:
使用jQuery选择器获取ID为showComp的表格中,除了具有stlisttitle类的tr元素外的所有行,并绑定hover事件:
在悬停触发时,首先尝试执行逻辑:如果ID为calendarPanel的元素处于可见状态,则隐藏class为playerlist的元素;否则,清除之前设置的延迟隐藏定时器timMess,计算playerlist元素相对于calendarCon容器的垂直位置(当前行偏移量减去容器偏移量再减去30像素),并显示playerlist元素。
$(".playerlist").css("top",$(this).offset().top-$(".calendarCon").offset().top-30).show();}}catch(e){}
当鼠标离开上述tr元素时,触发第二个回调函数:
设置一个名为timMess的定时器,延迟执行隐藏操作:
将class为playerlist的元素隐藏。
设定延迟时间为300毫秒。
此处有一行被注释掉的代码,原意可能是为了清除背景样式,当前未生效。
});
接着,对class为playerlist的元素本身也绑定hover事件,以处理鼠标移入浮动面板的情况:
当鼠标移入playerlist时,立即清除之前设置的延迟隐藏定时器timMess,防止面板在鼠标移至面板区域时被隐藏。
当鼠标离开playerlist元素时,触发隐藏逻辑:
重新设置定时器timMess,延迟执行隐藏操作:
将class为playerlist的元素隐藏。
设定延迟时间为300毫秒,并闭合相关事件监听。运行效果如图所示:

作者最新文章
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
