1---
2category: Sensors
3---
4 
5# useElementHover
6 
7Reactive element's hover state.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useElementHover } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const myHoverableElement = useTemplateRef('myHoverableElement')
17const isHovered = useElementHover(myHoverableElement)
18</script>
19 
20<template>
21  <button ref="myHoverableElement">
22    {{ isHovered }}
23  </button>
24</template>
25```
26 
27## Directive Usage
28 
29```vue
30<script setup lang="ts">
31import { vElementHover } from '@vueuse/components'
32import { shallowRef } from 'vue'
33 
34const isHovered = shallowRef(false)
35function onHover(state: boolean) {
36  isHovered.value = state
37}
38</script>
39 
40<template>
41  <button v-element-hover="onHover">
42    {{ isHovered ? 'Thank you!' : 'Hover me' }}
43  </button>
44</template>
45```
46 
47You can also provide hover options:
48 
49```vue
50<script setup lang="ts">
51import { vElementHover } from '@vueuse/components'
52import { shallowRef } from 'vue'
53 
54const isHovered = shallowRef(false)
55function onHover(hovered: boolean) {
56  isHovered.value = hovered
57}
58</script>
59 
60<template>
61  <button v-element-hover="[onHover, { delayEnter: 1000 }]">
62    <span>{{ isHovered ? 'Thank you!' : 'Hover me' }}</span>
63  </button>
64</template>
65```
66 
67## Type Declarations
68 
69```ts
70export interface UseElementHoverOptions extends ConfigurableWindow {
71  delayEnter?: number
72  delayLeave?: number
73  triggerOnRemoval?: boolean
74}
75export declare function useElementHover(
76  el: MaybeRefOrGetter<EventTarget | null | undefined>,
77  options?: UseElementHoverOptions,
78): ShallowRef<boolean>
79```
80