useHover

跟踪鼠标是否悬停在元素上。

导入

import { useHover } from 'asterui'

用法

function HoverExample() {
  const { ref, isHovered } = useHover<HTMLDivElement>()

  return (
    <div
      ref={ref}
      className={isHovered ? 'bg-blue-500' : 'bg-gray-500'}
    >
      {isHovered ? 'Hovering!' : 'Hover me'}
    </div>
  )
}

返回值

属性	类型	描述
ref	RefObject<T>	要附加到元素的 Ref
isHovered	boolean	鼠标悬停在元素上时为 true