html鼠标经过盒子延时显示,jQuery实现鼠标滑过延时显示的效果

WEB开发人员有时候经常用到延时操作的用户交互事件,比如聚美优品网站首页的产品展示,当鼠标移入产品1秒钟后,会显示产品的详情,而不希望用户的鼠标指针刚刚移入元素就显示详情,对于不希望显示详情的用户来说,达到了友好的交互作用,下面就要使用jQuery的计时器setTimeout,具体代码如下:

HTML代码

jQuery实现鼠标滑过延时显示的效果-拓源网

$(function(){

$('.post').mouSEOver(function(){

hideTimer=setTimeout("$('.post > .demo').show();",1000);//鼠标滑过元素1秒钟显示子元素

}).mouseleave(function(){

clearTimeout(hideTimer);//清除计时器

hideTimer=setTimeout("$('.post > .demo').hide();",10);//鼠标移除元素区域子元素消失

});

});

鼠标停留此处1秒钟有惊喜!
恭喜看到一个温暖的颜色。

为了不让鼠标移入后立即移出该元素也同样显示子元素,需要使用clearTimeout(hideTimer)来清除计时器,这样就能有效防止该问题发生。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值