> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/usehover.md).

# useHover

#### 基础用法

```html
<template>
  <div ref="hoverRef">{{ isHover ? "Hovered!" : "Hover over me!" }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const hoverRef = ref(null);

import { useHover } from "hooks-vue3";
const isHover = useHover(hoverRef, {
  delayEnter: 100,
  delayLeave: 100,
  onEnter() {
    console.log("ener");
  },
  onLeave() {
    console.log("leave");
  },
});

</script>
```

### API

```typescript
const isHover = useHover(hoverRef, {
  delayEnter: 100,
  delayLeave: 100,
  onEnter() {
    console.log("ener");
  },
  onLeave() {
    console.log("leave");
  },
});
```

### 参数

```typescript

type UseHoverOptions = {
  delayEnter?: number;
  delayLeave?: number;
  onLeave?: () => void;
  onEnter?: () => void;
};

type Target<T> = T | (() => T) | Ref<T>;

function useHover(
  target: Target<Element | null>,
  options?: UseHoverOptions,
): Ref<boolean>

```