【问题标题】:jQuery activate a mouseover function only if the mouse holds on the elementjQuery仅在鼠标停留在元素上时才激活鼠标悬停功能
【发布时间】:2010-12-12 14:29:04
【问题描述】:

只有当鼠标在“触发器”元素上停留预定持续时间(例如 500 毫秒)时,我才想激活 .mouseover 功能。

例如

$('.featured').mouseover(function () {
      $('.feat-txt').fadeOut("fast");
    });

只有当鼠标在 .featured 元素上至少停留 500 毫秒时,该函数才能启动并且 .feat-txt 可以淡出。在该元素上简单的鼠标悬停(只是快速移动)不会激活该功能。

有什么建议吗?

【问题讨论】:

    标签: jquery mouseover delay duration eventtrigger


    【解决方案1】:

    实际上,我也找到了这个 jquery hover 插件。 http://blog.threedubmedia.com/2008/08/eventspecialhover.html

    它不使用鼠标悬停等待持续时间,而是使用特定时间范围内的鼠标速度。

    结果可以在此页面右侧显示的三个框中看到:http://www.splendida.it(我目前正在处理它)。

    我觉得很好看。当鼠标从第一个框快速跳转到第三个框时,即使鼠标越过第二个元素,也不会发生任何事情。

    【讨论】:

      【解决方案2】:

      这样做:

      • 拦截该元素上的鼠标悬停事件。在回调函数中什么都不做;而是以您想要的延迟调用另一个函数,例如在原型中,您可以使用 functionName.delay(500)

      • 在第二个函数中,使用 jQuery 为您提供的获取鼠标坐标和元素坐标的任何内容检查鼠标是否仍在元素上。如果鼠标还在,做你想做的事。

      这对于长时间的延迟不起作用,因为用户可以将鼠标移到元素的外部和内部,并且 functionName 仍然会触发。

      如果你不介意我这么说,这是一个非常糟糕的主意。

      【讨论】:

      • 这真的不是太棘手,但是指向“悬停意图”的答案无论如何都会更好,因为它已经实现,它插入到您已经使用的 jQuery 中,并且可能已经比我的解决方案更好我提议
      【解决方案3】:

      我过去曾使用过悬停意图 - 非常好,并且按照我的想法进行操作:

      http://cherne.net/brian/resources/jquery.hoverIntent.html

      【讨论】:

      • 伟大的提示保罗。非常感谢!
      猜你喜欢
      • 2011-07-07
      • 2011-02-23
      • 2011-06-02
      • 1970-01-01
      • 2013-02-27
      • 1970-01-01
      • 2013-07-27
      • 2011-08-04
      • 1970-01-01
      相关资源
      最近更新 更多