jQuery 仅当鼠标按住元素时才激活鼠标悬停功能
我想仅当鼠标放在“触发”元素上预定的持续时间(例如 500 毫秒)时才激活 .mouseover
功能。
例如,
$('.featured').mouseover(function () {
$('.feat-txt').fadeOut("fast");
});
只有当鼠标位于 .featured 元素上至少 500 毫秒时,该函数才能启动并且 .feat-txt 可以淡出。简单地将鼠标悬停在该元素上(只需快速移动)不会激活该功能。
关于如何做到这一点有什么建议吗?
I would like to activate a .mouseover
function only if the mouse lays down on the "trigger" element for a predetermined duration (e.g. 500 milliseconds).
E.g.
$('.featured').mouseover(function () {
$('.feat-txt').fadeOut("fast");
});
Only if the mouse is positioned over the .featured element for at least 500 milliseconds period, the function can start and .feat-txt can FadeOut. A simple mouse over (just a quick movement) on that element doesn't activate the function.
Any suggestion on how to do that?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我过去曾使用过悬停意图 - 非常好,并且按照我的想法进行操作:
http://cherne.net/brian/resources/jquery.hoverIntent.html
I have used hover intent in the past - pretty good and does what you're after I think:
http://cherne.net/brian/resources/jquery.hoverIntent.html
这样做:
拦截该元素上的 onmouseover 事件。在回调函数中什么都不做;而是使用您想要的延迟调用另一个函数,例如在原型中,您可以使用 functionName.delay(500)
在第二个函数中,使用 jQuery 为您提供的任何内容来检查鼠标是否仍在元素上以获取鼠标坐标,并且元素坐标。如果鼠标仍然在那里,请执行您想做的任何操作。
这对于长时间的延迟不起作用,因为用户可以将鼠标移出元素并移回元素内部,并且 functionName 仍然会触发。
如果你不介意我这么说的话,这是一个非常糟糕的主意。
Do it like this:
Intercept onmouseover events on that element. In the callback function don't do anything; instead call another function with the delay you want, e.g. in prototype you do it with functionName.delay(500)
In the second function check if the mouse is still on the element using whatever jQuery gives you to get the mouse coordinates and the element coordinates. If the mouse is still there, do whatever you wanted to do.
This will not work for long delays because the user could move the mouse outside and back inside the element and functionName will still fire.
If you don't mind me saying it, this is a very bad idea.
事实上,我还发现了这个jquery悬停插件。 http://blog.tridubmedia.com/2008/08/eventspecialhover.html
它不使用鼠标悬停等待持续时间,而是使用特定时间范围内的鼠标速度。
结果可以在本页右侧显示的三个框中看到: http://www.splendida.it< /a> (我目前正在研究它)。
我觉得很好看。当鼠标从第一个框快速跳转到第三个框时,即使鼠标经过第二个元素,也不会发生任何事情。
Actually, I found also this jquery hover plugin. http://blog.threedubmedia.com/2008/08/eventspecialhover.html
It doesn't use the mouseover wait duration, but uses mouse speed in a specific time frame.
The result can be seen on the three boxes displayed on the right side of this page: http://www.splendida.it (I'm currently working on it).
It looks nice to me. When the mouse jumps quickly from the first to the third box, nothing happens, even if the mouse passes over the second element.