Hover

The v-hover component provides a simple interface for handling hover states for any component.

<PageFeatures />

Usage

v-hover is a renderless component that uses the default slot to provide scoped access to its internal model; as well as mouse event listeners to modify it. To explicitly control the internal state, use the model-value property.

<ExamplesUsage name="v-hover" /> <PromotedEntry />

API

Component	Description
v-hover	Primary Component

<ApiInline hide-links />

Examples

Props

Disabled

Use the disabled prop to pause hover tracking. When re-enabled, the value updates to reflect the cursor's current position.

<ExamplesExample file="v-hover/prop-disabled" />

Open and close delay

Delay v-hover events by using open-delay and close-delay props in combination or separately.

<ExamplesExample file="v-hover/prop-open-and-close-delay" />

Misc

Hover list

v-hover can be used in combination with v-for to make a single item stand out when the user interacts with the list.

<ExamplesExample file="v-hover/misc-hover-list" />

Transition

Create highly customized components that respond to user interaction.

<ExamplesExample file="v-hover/misc-transition" />