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)来清除计时器，这样就能有效防止该问题发生。

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

HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画鼠标悬停 div容器凸起放大显示.鼠标悬停div容器凸起放大显示效果代码结构 1. HTML代码 what? If you want to sell s ...
ajax鼠标悬停,mouseout后触发jQuery Ajax鼠标悬停事件
这种情况正在发生,因为当鼠标已离开节点时,ajax请求尚未完成.它只会做它的事情,等待服务器的响应,然后显示你的成功函数中定义的工具提示. 解决这个问题的一种方法是拥有一个变量,比如isHoverin ...
获取鼠标在盒子中的坐标
1.在盒子内点击,想要得到鼠标距离盒子左右的距离想到鼠标事件,但是并不是对于盒子而言的 2.首先得到鼠标在页面中的坐标(pageX.pageY) 3.其次得到盒子在页面中的距离 4.距离一减,就能 ...
html鼠标经过盒子延时显示,jQuery 鼠标经过(hover)事件的延时处理示例
一.关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...
php鼠标经过显示文本,jQuery实现鼠标单击网页文字后在文本框显示的方法
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考 ...
html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法
本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: ul{ list-style:none; } li{ float:left; m ...
css鼠标滑过图标显示_CSS和jQuery教程：苹果风格的花式图标滑出导航
css鼠标滑过图标显示 View demo 查看演示Download Source 下载源 Today I want to show you, how to create an Apple-style ...
php主页显示商品预览图代码,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能...
这次给大家带来jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1 . ...

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

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

最新文章

热门文章