---
title: "useHover 用法与示例"
description: "跟踪鼠标是否在元素上。"
canonical: https://reactuse.com/zh-Hans/state/usehover/
---

# useHover

跟踪鼠标是否在元素上。

`useHover` 接受一个 DOM 元素的 ref，返回一个布尔值表示鼠标当前是否悬停在该元素上。它内部附加 `mouseenter` 和 `mouseleave` 事件监听器，并在卸载时清理。返回的值响应式更新，每当悬停状态改变时触发重新渲染。

### 使用场景

- 当用户悬停在元素上时显示工具提示、弹出框或上下文信息
- 在悬停时高亮或放大 UI 元素，不使用纯 CSS 方案（例如当你需要触发副作用时）
- 基于悬停意图有条件地渲染内容或获取数据

### 注意事项

- **基于 Ref 的目标**：传入一个 React ref 对象。hook 自动处理事件监听器的附加和分离。
- **仅鼠标**：此 hook 跟踪鼠标事件（`mouseenter`/`mouseleave`）。它不检测移动设备上的基于触摸的悬停。
- 参见 `useTextSelection` 了解跟踪用户选择的内容，或浏览器类别的 hook 了解其他指针相关的实用工具。

## Usage

```tsx live

function Demo() {
  const ref = useRef<HTMLDivElement>(null);
  const hovered = useHover(ref);
  return <div ref={ref}> {hovered ? "是" : "否"}</div>;
};

```

%%API%%