{"id":16958586,"url":"https://github.com/vortesnail/hover-seconds-do","last_synced_at":"2026-05-03T12:33:58.108Z","repository":{"id":57266950,"uuid":"218566333","full_name":"vortesnail/hover-seconds-do","owner":"vortesnail","description":":boat: Perform an action after an element has hovered for a few seconds","archived":false,"fork":false,"pushed_at":"2019-11-04T09:35:48.000Z","size":19,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-16T15:12:01.125Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vortesnail.png","metadata":{"files":{"readme":"README-zh-Hans.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-30T15:58:38.000Z","updated_at":"2019-11-30T23:43:31.000Z","dependencies_parsed_at":"2022-08-25T03:41:11.177Z","dependency_job_id":null,"html_url":"https://github.com/vortesnail/hover-seconds-do","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vortesnail/hover-seconds-do","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fhover-seconds-do","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fhover-seconds-do/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fhover-seconds-do/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fhover-seconds-do/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vortesnail","download_url":"https://codeload.github.com/vortesnail/hover-seconds-do/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fhover-seconds-do/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32569713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T22:43:00.648Z","updated_at":"2026-05-03T12:33:58.072Z","avatar_url":"https://github.com/vortesnail.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hover-seconds-do [![Build Status](https://travis-ci.org/vortesnail/hover-seconds-do.svg?branch=master)](https://travis-ci.org/vortesnail/hover-seconds-do)\n\n## 介绍\n在某些场景，我们希望鼠标移到某个元素上，悬停几秒后能执行一些操作，但是鼠标稍微移动一下，时间重置，状态回退如初。在鼠标离开当前绑定的元素时，我们的页面回退如初。这个工具函数一定能帮到你。\n\n## 例子\n播放器一个很重要的功能: **鼠标悬停在视频播放界面时，在一定时间后鼠标会消失，视频下方的控制栏也会隐藏，呈现视频的最大可视化。但是鼠标稍微一动，一切恢复如初**。用一张简单的 gif 图来说明的话，是下面这样子的：![demo.gif](https://cdn.nlark.com/yuque/0/2019/gif/341314/1572511989609-54aa916e-5f8a-4946-8d5d-2e6ab60d5525.gif#align=left\u0026display=inline\u0026height=424\u0026name=%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6-2019-10-31-11.18.41%20%281%29.gif\u0026originHeight=424\u0026originWidth=824\u0026search=\u0026size=255955\u0026status=done\u0026width=824)\n\n## 快速使用\n### 安装\n```bash\nnpm install --save hover-seconds-do\n```\n\n### 使用\n- element: 你所希望操作的元素（比如上面 gif 中 “我是视频”这个 div 元素）\n- secondsLaterDoFn: 你设定的时间之后，想做什么操作（比如上面 gif 中“鼠标消失，控制栏消失”）\n- seconds: 你希望的时间，单位: ms（比如上面 gif 中我设定的时间为 2000ms）\n- reNormalFn: 回归原样的操作（比如上面 gif 中控制栏和鼠标都回来）\n\n**注: html 引用需要下载 `dist/index_bundle.js` 手动引入，在 React 中要手动 `import 'hover-seconds-do';` **\n```js\nconst hoversd = new window.HoverSD(element, secondsLaterDoFn, seconds, reNormalFn);\nhoversd.secondsHoverEX();\n// ...\n// other code here\n// ...\nhoversd.removeElemEventListener();\n```\n\n## 项目运行\n在终端一步一步执行：\n```bash\ngit clone git@github.com:vortesnail/hover-seconds-do.git\n```\n进入 clone 下来的文件\n```bash\nnpm install -g http-server\nnpm run example\n```\n\n浏览器窗口打开 `http://localhost:8880/example/index.html` 即可查看样例\n\n## 示例代码\n我们拿上面的 gif 做例子：\n\n**index.html**\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n  \u003ctitle\u003eexample\u003c/title\u003e\n  \u003clink rel=\"stylesheet\" href=\"./index.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"box\"\u003e我是视频\n    \u003cdiv class=\"test-box\"\u003e我是视频控制栏\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cscript src=\"./index.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**index.css**\n```css\n.box {\n  width: 400px;\n  height: 200px;\n  background-color: lightskyblue;\n  text-align: center;\n  line-height: 200px;\n  color: #fff;\n  position: relative;\n  /* cursor: none; */\n}\n\n.box .test-box {\n  position: absolute;\n  width: 100%;\n  height: 30px;\n  left: 0;\n  bottom: 0;\n  background-color:lightgray;\n  text-align: center;\n  line-height: 30px;\n}\n```\n\n**index.js**\n```js\nlet box = document.querySelector('.box');\n\nfunction hiddenTestBox() {\n  let textBox = document.querySelector('.test-box');\n  textBox.style.display = 'none';\n  box.style.cursor = 'none';\n}\n\nfunction showTestBox() {\n  let textBox = document.querySelector('.test-box');\n  textBox.style.display = 'block';\n  box.style.cursor = 'default';\n}\n\nlet hoversd = new window.HoverSD(box, hiddenTestBox, 2000, showTestBox);\nhoversd.secondsHoverEX();\n// hoversd.removeElemEventListener();\n```\n## LICENSE\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvortesnail%2Fhover-seconds-do","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvortesnail%2Fhover-seconds-do","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvortesnail%2Fhover-seconds-do/lists"}