Hover

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

Basic

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.

Hover over me
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!

Disabled

The disabled prop disables the hover functionality.

Hover over me!

Open and close delay

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

Open Delay (Mouse enter)
Close Delay (Mouse leave)

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.

For the perfect meal

QW cooking utensils

Our Vintage kitchen utensils delight any chef.
Made of bamboo by hand
CONTENTS

  • Introduction

  • Basic

  • Disabled

  • Open and close delay

  • Hover list

  • Transition