Hover
The v-hover component provides a simple interface for handling hover states for any component.
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.
<v-hover>
<template v-slot:default="{ isHovering, props }">
<v-card
v-bind="props"
:color="isHovering ? 'primary' : undefined"
title="Hover over me"
text="..."
></v-card>
</template>
</v-hover>API
| Component | Description |
|---|---|
| v-hover | Primary Component |
Examples
Props
Disabled
The disabled prop disables the hover functionality.
Open and close delay
Delay v-hover events by using open-delay and close-delay props in combination or separately.
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.
New Releases
It's New Release Friday
Newly released songs.
Rock
Greatest Rock Hits
Lose yourself in rock tunes.
Mellow Moods
Ambient Bass
Chill beats to mellow you out.
Transition
Create highly customized components that respond to user interaction.
QW cooking utensils
Made of bamboo by hand