文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

开始使用

示例

动画

手势

动画值

工具

集成

指南

JS

React

Vue

开始使用

示例

动画

手势

动画值

工具

集成

指南

JavaScript

hover

hover

Motion 的 hover 函数检测悬停手势，并在手势开始和结束时触发事件。

由于历史原因，浏览器会模拟来自触摸设备的悬停事件，这可能会导致 UI “卡住” 和其他不必要的视觉伪影/行为错乱。hover 过滤掉了这些伪造事件。

hover(".button", (element) => {
  console.log("hover started on", element)

  return () => console.log("hover end")
})

hover 还是

  • 简洁：自动管理事件监听器

  • 便捷：接受元素或 CSS 选择器，以便一次附加多个手势

  • 懒加载：仅附加所需的事件监听器

hover 回调可以执行任何操作，但通常用于启动或控制动画。

hover("li", (element) => {
  const animation = animate(element, { rotate: 360 })

  return () => animation.stop()
})

用法

导入

hover 可以通过 "motion" 导入到您的项目中

import { hover } from "motion"

悬停开始

hover 可以检测 Element/元素数组上的悬停手势

hover(
  document.getElementById("my-id"),
  () => {
    console.log("my-id hovered!")
  }
)

或通过 CSS 选择器

hover("a", () => console.log("link hovered"))

当悬停手势开始时，提供的回调函数会接收到悬停的元素和触发的 PointerEvent

hover("div:nth-child(2)", (element, startEvent) => {
  console.log("Hover started on", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})

悬停结束

悬停开始函数可以可选地返回一个回调函数。 这将在悬停手势结束时被调用

hover("a", () => {
  console.log("hover start")
  
  return (endEvent) => {
    console.log("hover end")
  }
})

此回调函数将接收到触发的 PointerEvent。

取消手势检测

hover 返回一个函数，当调用该函数时，将取消与手势关联的所有活动事件处理程序。

const cancelHover = hover(element, callback)

cancelHover()

选项

passive

默认值： true

如果设置为 false，则可以调用 event.preventDefault()，但手势的性能会降低。了解更多关于被动事件的信息.

once

默认值： false

如果设置为 true，则每个提供的元素将仅触发一次其手势。Motion+ 示例

Motion+ 示例

Motion+是一次性付款、终身会员资格，让您可以访问不断增长的高级示例的源代码库，以及高级组件，例如 Cursor 和 AnimateNumber 以及函数，例如splitText.

以 hover 为特色的示例包括

Motion 的 hover 函数检测悬停手势，并在手势开始和结束时触发事件。

由于历史原因，浏览器会模拟来自触摸设备的悬停事件，这可能会导致 UI “卡住” 和其他不必要的视觉伪影/行为错乱。hover 过滤掉了这些伪造事件。

hover(".button", (element) => {
  console.log("hover started on", element)

  return () => console.log("hover end")
})

hover 还是

  • 简洁：自动管理事件监听器

  • 便捷：接受元素或 CSS 选择器，以便一次附加多个手势

  • 懒加载：仅附加所需的事件监听器

hover 回调可以执行任何操作，但通常用于启动或控制动画。

hover("li", (element) => {
  const animation = animate(element, { rotate: 360 })

  return () => animation.stop()
})

用法

导入

hover 可以通过 "motion" 导入到您的项目中

import { hover } from "motion"

悬停开始

hover 可以检测 Element/元素数组上的悬停手势

hover(
  document.getElementById("my-id"),
  () => {
    console.log("my-id hovered!")
  }
)

或通过 CSS 选择器

hover("a", () => console.log("link hovered"))

当悬停手势开始时，提供的回调函数会接收到悬停的元素和触发的 PointerEvent

hover("div:nth-child(2)", (element, startEvent) => {
  console.log("Hover started on", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})

悬停结束

悬停开始函数可以可选地返回一个回调函数。 这将在悬停手势结束时被调用

hover("a", () => {
  console.log("hover start")
  
  return (endEvent) => {
    console.log("hover end")
  }
})

此回调函数将接收到触发的 PointerEvent。

取消手势检测

hover 返回一个函数，当调用该函数时，将取消与手势关联的所有活动事件处理程序。

const cancelHover = hover(element, callback)

cancelHover()

选项

passive

默认值： true

如果设置为 false，则可以调用 event.preventDefault()，但手势的性能会降低。了解更多关于被动事件的信息.

once

默认值： false

如果设置为 true，则每个提供的元素将仅触发一次其手势。Motion+ 示例

Motion+ 示例

Motion+是一次性付款、终身会员资格，让您可以访问不断增长的高级示例的源代码库，以及高级组件，例如 Cursor 和 AnimateNumber 以及函数，例如splitText.

以 hover 为特色的示例包括

Motion 的 hover 函数检测悬停手势，并在手势开始和结束时触发事件。

由于历史原因，浏览器会模拟来自触摸设备的悬停事件，这可能会导致 UI “卡住” 和其他不必要的视觉伪影/行为错乱。hover 过滤掉了这些伪造事件。

hover(".button", (element) => {
  console.log("hover started on", element)

  return () => console.log("hover end")
})

hover 还是

  • 简洁：自动管理事件监听器

  • 便捷：接受元素或 CSS 选择器，以便一次附加多个手势

  • 懒加载：仅附加所需的事件监听器

hover 回调可以执行任何操作，但通常用于启动或控制动画。

hover("li", (element) => {
  const animation = animate(element, { rotate: 360 })

  return () => animation.stop()
})

用法

导入

hover 可以通过 "motion" 导入到您的项目中

import { hover } from "motion"

悬停开始

hover 可以检测 Element/元素数组上的悬停手势

hover(
  document.getElementById("my-id"),
  () => {
    console.log("my-id hovered!")
  }
)

或通过 CSS 选择器

hover("a", () => console.log("link hovered"))

当悬停手势开始时，提供的回调函数会接收到悬停的元素和触发的 PointerEvent

hover("div:nth-child(2)", (element, startEvent) => {
  console.log("Hover started on", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})

悬停结束

悬停开始函数可以可选地返回一个回调函数。 这将在悬停手势结束时被调用

hover("a", () => {
  console.log("hover start")
  
  return (endEvent) => {
    console.log("hover end")
  }
})

此回调函数将接收到触发的 PointerEvent。

取消手势检测

hover 返回一个函数，当调用该函数时，将取消与手势关联的所有活动事件处理程序。

const cancelHover = hover(element, callback)

cancelHover()

选项

passive

默认值： true

如果设置为 false，则可以调用 event.preventDefault()，但手势的性能会降低。了解更多关于被动事件的信息.

once

默认值： false

如果设置为 true，则每个提供的元素将仅触发一次其手势。Motion+ 示例

Motion+ 示例

Motion+是一次性付款、终身会员资格，让您可以访问不断增长的高级示例的源代码库，以及高级组件，例如 Cursor 和 AnimateNumber 以及函数，例如splitText.

以 hover 为特色的示例包括

缓动函数

inView

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky