Skip to content

useElementHover ​

Category
Export Size
598 B
Last Changed
last year

Reactive element's hover state.

Demo ​

Usage ​

vue
<script setup>
import { useElementHover } from '@vueuse/core'

const myHoverableElement = ref()
const isHovered = useElementHover(myHoverableElement)
</script>

<template>
  <button ref="myHoverableElement">
    {{ isHovered }}
  </button>
</template>

Directive Usage ​

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { vElementHover } from '@vueuse/components'

const isHovered = ref(false)
function onHover(state: boolean) {
  isHovered.value = state
}
</script>

<template>
  <button v-element-hover="onHover">
    {{ isHovered ? 'Thank you!' : 'Hover me' }}
  </button>
</template>

Type Declarations ​

typescript
export interface UseElementHoverOptions extends ConfigurableWindow {
  delayEnter?: number
  delayLeave?: number
}
export declare function useElementHover(
  el: MaybeRefOrGetter<EventTarget | null | undefined>,
  options?: UseElementHoverOptions,
): Ref<boolean>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
webfansplz
Jelf
geekreal
cx33
Joe Maylor

Changelog ​

v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v10.0.0-beta.0 on 3/14/2023
c86f2 - fix: window is not defined (#2793)
v9.13.0 on 2/18/2023
23283 - feat: give hook delay properties (#2741)
v9.1.1 on 8/23/2022
d9c0c - fix: support set el ref type (#2079)

Released under the MIT License.