上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useHover

Tags:
Sensors

一个用于追踪元素悬停状态的 React 钩子。

演示

源码
isHovered:
false
Hover me 😭

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const isHovered = useHover(elementTarget, options)

元素目标 ElementTarget

ElementTarget 是一个联合类型，代表可以被定位的各种元素。

更多详情，请参见 ElementTarget 或 ElementTarget 类型。

选项 Options

export type UseHoverOptions = {
  /**
   * 触发 `onEnter` 事件前的延迟时间（毫秒）
   */
  delayEnter?: number
  /**
   * 触发 `onLeave` 事件前的延迟时间（毫秒）
   */
  delayLeave?: number
  /**
   * 鼠标进入目标元素时的事件处理器
   */
  onEnter?: (e: MouseEvent) => void
  /**
   * 鼠标离开目标元素时的事件处理器
   */
  onLeave?: (e: MouseEvent) => void
  /**
   * 鼠标进入或离开目标元素时的事件处理器
   */
  onChange?: (isHovered: boolean, e: MouseEvent) => void
}

返回值

一个用于指示目标元素是否被悬停的 boolean 值。