useHover

跟蹤滑鼠是否在元素上。

useHover 追蹤滑鼠是否懸停在目標元素上。它回傳一個布林值，在滑鼠進入元素時為 true，離開時為 false。支援可選的進入/離開延遲以實現防抖懸停效果。

使用場景

• 在滑鼠懸停時顯示工具提示或預覽內容
• 實作懸停時高亮或展開的 UI 效果
• 建構帶有延遲的懸停選單（防止意外觸發）

注意事項

• SSR 安全：在伺服器端渲染時回傳 false。伺服器上不會附加事件監聽器。
• 延遲：支援 enterDelay 和 leaveDelay 選項以防抖懸停狀態變更。
• 相關 hooks：另請參閱 useMouse 追蹤游標位置，以及 useMousePressed 追蹤按壓狀態。

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;