Jquery:如何向 mouseleave 添加延迟,以便如果有人无意间将鼠标悬停在元素上,它仍然保持打开状态

2024-02-05

悬停意图插件与我需要的相反。 我有一个由 .trigger 触发的 .popup,当我将鼠标悬停在其上时,我希望 .popup 在几秒钟内不淡出,但如果我将鼠标悬停,然后再次悬停,则取消将要发生的淡出并保持 .popup 打开。

有谁知道我会怎么做?

这不起作用,但这是一个想法:

 $('.trigger').hover(function(){
        $('.popup').fadeIn(600)
    }, function() {
        $('.popup').delay(2000, function(){
            if ($(this).blur() = true) {
                $('.popup').fadeOut(600)
            }
        });
    })

jQuery悬停意图插件 http://cherne.net/brian/resources/jquery.hoverIntent.html正是您所寻找的。

超时属性将设置在调用 out 函数之前鼠标需要离开该区域的时间。

引用悬停意图网站:

暂停: 在调用“out”函数之前的简单延迟(以毫秒为单位)。如果用户在超时到期之前将鼠标移回到元素上,则不会调用“out”函数(也不会调用“over”函数)。这主要是为了防止草率/人为的鼠标轨迹暂时(无意地)使用户离开目标元素......给他们时间返回。默认超时:0

要设置它...

$('.trigger').hoverIntent({
     over: startHover,
     out: endHover,
     timeout: 2000
});

然后定义要处理的函数over and out

 function startHover(e){
    //your logic here
    $('.popup').fadeIn(600)
 }

 function endHover(){
     //your logic here
     $('.popup').fadeOut(600)
 }

EDIT:

您还可以调整interval属性来增加/减少 startHover 函数触发的时间...默认设置为 100 毫秒...您可以将其设置为零,以便在鼠标进入触发区域时立即触发弹出窗口(如果您愿意)喜欢。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery:如何向 mouseleave 添加延迟,以便如果有人无意间将鼠标悬停在元素上,它仍然保持打开状态 的相关文章

  • “错误”:使用保管箱选择器时出现“无效来源”

    div div
  • jQuery.data() 存储在哪里?

    jQuery 将值存储在哪里data 它设置为 DOM 对象 是否有某种变量 例如jQuery dataDb或者什么 甚至可能是私人的东西 有什么办法可以访问这个对象吗 在内部 jQuery 创建一个名为的空对象 cache 用于存储您通过
  • JQuery更新数据-属性

    考虑以下相册示例 相册的首页和最后一页是相册跨页大小的一半 我设置了attr data width and attr data width correct 用于比较 例如 checkImageDimesions 附加对象数据 不是简单的字符
  • 如何在 jQuery 中检查元素是否有多个 css 类

    我有一些像下面这样的html 我循环遍历了 div accordionContents 内的所有元素 在循环内 我需要检查元素 h2 是否应用了两个 css 类 acc trigger 和 active 的条件 我该怎么做 div div
  • 使用 jquery 连续选取框文本

    我有列表项 并且列表项需要使用 jQuery 进行排序 How 检查这个 http wordcrowd org index php title Rotating marquee with jQuery Cycle http wordcrow
  • 在 History popstate 事件中获取 AngularJs $scope?

    我是 angularjs 开发新手 我有 var app angular module myapp app controller ProductCtrl scope sce function scope sce scope products
  • 如何将图像添加到 jquery 工具提示

    我还没有看到这个确切的问题得到解决 如果有 请指出它 我正在使用 jquery 的 ui 工具提示 我有一个链接 当您将鼠标悬停在它上面时 我想显示一张图像 到目前为止 没有什么对我有用 标题中的 ui 代码 HTML see a a
  • jQuery 数据与 Attr?

    两者的用法有什么区别 data and attr使用时data someAttribute 我的理解是 data存储在 jQuery 中 cache 而不是 DOM 因此 如果我想使用 cache对于数据存储 我应该使用 data 如果我想
  • HTTP 状态 415 - JQUERY 中的 AJAX 调用不支持的媒体类型到使用 JERSEY 实现的 Restful WS

    您好 我正在尝试将 json 数据发布到使用 Jersey 实现的 Restful WS 我通过 jquery ajax 发布数据 为什么我会收到 HTTP Status 415 unsupported Media type 谢谢 单击此处
  • 在 setTimeout 中传递 $(this)

    如何将 this 作为 setTimeout 函数 方法 中的参数传递 这是我到目前为止正在做的事情 它正在发挥作用 var Variables Variables ResizeTimer false Variables obj null
  • 使用 JQuery 定义要附加的 HTML 模板

    我有一个正在循环的数组 每次条件成立时 我想附加一份副本HTML下面的代码到具有一些值的容器元素 我可以在哪里放置此 HTML 以以智能方式重复使用 a href class list group item div class image
  • 获取点击元素的 HTML 内容 jQuery

    我有以下 HTML
  • PhoneGap/Cordova:如何使用cookies(iOS)?

    我有一个适用于 iOS 的 PhoneGap Corodova 项目 在 iOS 模拟器上构建时 我使用了 Jquery Cookies 它们很好 但是 既然我的设备上有该应用程序用于测试 它们就不再工作了 我猜这只是 iOS 不支持的东西
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 面板时的双滚动条

    我无法弄清楚这一点 将以下代码放入布局页面并在浏览器中查看后 我将显示 2 个垂直滚动条 div div 遇到了类似的问题 并注意到只有在使用我的自定义主题时才出现这种问题 我以错误的顺序将自定义主题添加到页面 这导致了问题 正确的顺序是
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2

随机推荐

  • System.nanoTime() 的精度与准确度

    的文档System nanoTime http docs oracle com javase 6 docs api java lang System html nanoTime 说以下 强调我的 此方法只能用于测量经过的时间 与系统或挂钟时
  • 当第二个键已按下时如何检测按键按下/按下

    在我的应用程序中 我允许用户通过按住右箭头键通过使用ProcessCmdKey 现在我想让用户能够在需要时提高滚动速度 理想情况下 用户应该能够按住右箭头键 那么当他决定提高速度时 他应该在不释放右箭头键 同时按住换档键当他决定恢复正常速度
  • 检查两个字符串是否包含相同的字符,不考虑它们的频率

    我有两个字典对应于两个不同字符串的字符数 我想检查它们是否由相同的字符组成 与字符出现的频率无关 说 我有两个字符串caars and racs它们是由相同的角色组成的a c r s 我知道cmp比较两个字典的方法 它还比较两个键值对 但我
  • InputStreamReader缓冲问题

    不幸的是 我正在从一个具有两种字符编码类型的文件中读取数据 有一个标题和一个正文 标头始终采用 ASCII 格式 并定义正文编码所用的字符集 标头不是固定长度 必须通过解析器运行以确定其内容 长度 该文件也可能非常大 因此我需要避免将整个内
  • Ubuntu 11.10 上的 OpenCV

    我刚刚将系统从 ubuntu 11 04 更新到 11 10 现在我无法再编译任何包含 OpenCV 库引用的 C 程序 我已经尝试重新安装 OpenCV 我使用2 1版本 但我遇到了这个错误 tmp ccArHTZL o In funct
  • 如何按百分比设置 svg 宽度和 svg 高度?

    我用 svg 创建了一条线 但是当我调整浏览器大小时 用 svg 创建的线没有调整大小 我尝试以百分比设置 svg 的宽度 但这样做后该线不会出现 如何按百分比设置 svg 的宽度
  • Stream.dropWhile() 没有以两个不同的值返回正确的值

    我正在尝试学习 Java 9 中的新功能 我开始了解 Stream 的 dropWhile 方法 但它在两种不同的场景中返回不同的值 这是我的代码 package src module import java util stream Col
  • 从模态窗口打开的帮助文件没有响应

    使用Delphi XE2 Win64 因此 我有一个包含许多表单的大型应用程序 如果我从主表单打开帮助文件并打开模式窗口 然后按 F1 在模式窗口上触发上下文相关帮助 帮助文件窗口将显示正确的信息 但是在关闭模式窗口之前 无法关闭帮助文件
  • Devise + Omniauth 登录 Facebook 时调用操作通道

    当我尝试使用 Omniauth 和 Devise 登录 Facebook 时 passthru被称为而不是facebook 我如何通过link to user omniauth authorize path facebook 我多次修改代码
  • Web Worker 与 Promise

    为了使 Web 应用程序具有响应能力 您可以使用异步非阻塞请求 我可以设想两种方法来实现这一目标 一种是使用 deferreds promise 另一个是网络工作者 对于 Web Workers 我们最终引入了另一个流程 并且产生了来回整理
  • PHP 错误日志已停止工作。它确实起作用了

    它已经工作了很长时间并且停止了 我一定错过了一些明显的东西 File etc php5 apache2 php ini相关设置有 display errors On I am not sure if this makes a differe
  • NSUndoManager:重做不起作用

    我正在制作一个使用 NSSlider 的简单应用程序 可以使用两个按钮将其设置为最大值或最小值 撤消管理器应跟踪所有更改并允许撤消 重做使用这两个按钮所做的所有更改 这是界面 import
  • 生成一个范围内的随机偶数?

    这是我遵循的格式 int randomNum rand nextInt max min 1 min 这是我的代码 我正在尝试获取 1 到 100 之间的随机偶数 Random rand new Random int randomNum ra
  • 如果我想使用 gitignore 中的文件怎么办

    对于敏感数据 例如 aws 密钥或密码 我将它们放入 gitignore 中的文件中 以确保它不会提交到 git 但是 当脚本运行时要使用按键时 我该怎么办 运行前手动添加文件中的关键内容 如果程序需要由Jenkins定期触发怎么办 谁能帮
  • Django:操作错误没有这样的表

    我正在使用 Django CMS 的 Django 项目中构建一个相当简单的应用程序 Research 这是我对项目 应用程序的第一次尝试 它的主要目的是存储各种知识资产 即研究人员撰写的文章 书籍等 问题是当我将浏览器指向 researc
  • Visual Studio 监视中的向量“无运算符“[]”与这些操作数匹配”错误

    在 Visual Studio 2012 中单步执行以下示例代码时 std vector
  • 如何在 OpenGL 中对 glutSolidTorus 进行纹理处理? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我正在尝试纹理glutSolidTorus 这是我的代码 glColor3f 1 0f 1 0f 1 0f glEnab
  • UIButton 垂直对齐不起作用

    我不明白为什么在下面的代码中 标题对齐没有保持在顶部 UIButton btn2 UIButton buttonWithType UIButtonTypeRoundedRect btn2 titleLabel font UIFont sys
  • 编辑主键

    如果表只包含主键字段 是否可以在 MVC3 中编辑主键 例如 我有一个控制台表 其中我将控制台名称作为主键 我希望能够编辑它并更改它并保存编辑后的值 如果您需要更多信息 请告诉我 作为一般规则 您永远不应该编辑主键 SQL Server 中
  • Jquery:如何向 mouseleave 添加延迟,以便如果有人无意间将鼠标悬停在元素上,它仍然保持打开状态

    悬停意图插件与我需要的相反 我有一个由 trigger 触发的 popup 当我将鼠标悬停在其上时 我希望 popup 在几秒钟内不淡出 但如果我将鼠标悬停 然后再次悬停 则取消将要发生的淡出并保持 popup 打开 有谁知道我会怎么做 这