useHover

A hook that tracks whether the element is being hovered.

Code demonstration

no-hover

Basic usageUse ref to set element that needs monitoring.

<template>
	<div ref="valueRef">
		{{ isHovering ? 'hover' : 'no-hover' }}
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import { useHover } from 'vue-hooks-plus'

const valueRef = ref()
const isHovering = useHover(valueRef)
</script>

<template>
	<div ref="valueRef">
		{{ isHovering ? 'hover' : 'no-hover' }}
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import { useHover } from 'vue-hooks-plus'

const valueRef = ref()
const isHovering = useHover(valueRef)
</script>

API

const isHovering = useHover(target, {
  onEnter,
  onLeave,
  onChange,
})

const isHovering = useHover(target, {
  onEnter,
  onLeave,
  onChange,
})

Params

Property	Description	Type	Default
target	DOM element or ref	`() => Element` \| `Element` \| `JSX.Element`	-
options	More config	`Options`	-

Options

Property	Description	Type	Default
onEnter	Callback to be executed on mouse hover	`() => void`	-
onLeave	Callback to be executed on mouse leave	`() => void`	-
onChange	Callback to be executed on hover change	`(isHovering: boolean) => void`	-

Result

Property	Description	Type
isHovering	Whether the element is being hovered	`Readonly<Ref<boolean>>`

Source

Source • Docs • Demo

useHover #

Code demonstration #

API #

Params #

Options #

Result #

Source #

useHover

Code demonstration

API

Params

Options

Result

Source