Skip to content
On this page

useElementHover

Category
Last Changed
3 months ago

Reactive element's hover state.

Demo

Usage

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

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

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

Type Declarations

export declare function useElementHover(el: MaybeRef<EventTarget>): Ref<boolean>
export declare function useElementHover(el: MaybeRef<EventTarget>): Ref<boolean>

Source

SourceDemoDocs

Contributors

Anthony Fu
Joe Maylor

Changelog

v6.6.0 on 10/16/2021
520af - feat: new function (#830)
useElementHover has loaded