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毫秒,并闭合相关事件监听。

运行效果如图所示:
jQuery鼠标悬停显示与延迟隐藏实现 具体实现代码如下所示:
作者最新文章