Skip to content
On this page

useElementHover

Category
Export Size
1.05 kB
Last Changed
4 months ago

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>
<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.

html
<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>
<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 declare function useElementHover(
  el: MaybeComputedRef<EventTarget | null | undefined>
): Ref<boolean>
export declare function useElementHover(
  el: MaybeComputedRef<EventTarget | null | undefined>
): Ref<boolean>

Source

SourceDemoDocs

Contributors

Anthony Fu
webfansplz
cx33
Joe Maylor

Changelog

v9.1.1 on 8/23/2022
d9c0c - fix: support set el ref type (#2079)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.1.0 on 3/16/2022
db4f7 - fix: make directive only registered once (#1412)
v8.0.0-beta.1 on 3/5/2022
73b0d - feat: directive support (#1359)

Released under the MIT License.