useHover

跟踪鼠标是否在元素上。

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

使用场景

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

注意事项

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

Usage

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

API

useHover

Returns

boolean

Arguments

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;