How to Handle Hover Events With Vuetify

While we could use the CSS :hover pseudo-class to customize element styles on mouse hover, Vuetify provides a neat way of doing this, with the v-hover component. Let’s see how we can use it in this article.

Vuetify hover component (v-hover)

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }">
        <v-card
          class="ma-4 pa-4"
          width="200"
          height="200"
          :elevation="hover ? 12 : 2"
        >
          Hover over me!
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The v-hover default slot provides a hover prop, whose value changes depending on the current hover state of the child of the hover component; when the mouse has not hovered over it, hover remains false. For our case, that will set the elevation of the card to 2:

And when we hover over it, hover becomes true and the card elevation becomes 12:

Vuetify hover open delay

We can delay the hover prop change from false to true with the open-delay prop. In the code below, we use open-delay to set a delay of 200ms for the hover prop to become true from mouse hover:

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }" open-delay="200">
        <v-card
          :elevation="hover ? 16 : 2"
          :class="{ 'on-hover': hover }"
          class="ma-4"
          height="100"
          max-width="250"
        >
          <v-card-text> Open Delay (Mouse enter) </v-card-text>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify hover close delay

Similarly, we can delay the hover prop from true to false after the mouse leaves it, with the close-delay prop. So after the mouse leaves the card, it would take 200ms for its elevation to be reduced:

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }" close-delay="200">
        <v-card
          :elevation="hover ? 16 : 2"
          :class="{ 'on-hover': hover }"
          class="ma-4"
          height="100"
          max-width="250"
        >
          <v-card-text> Close Delay (Mouse leave) </v-card-text>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Disable hover

We can disable the hover functionality with the disabled prop:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-hover v-slot="{ hover }" disabled>
        <v-card
          :elevation="hover ? 12 : 2"
          height="100"
          max-width="250"
        >
          <v-card-text class="my-4 text-center text-h6">
            Hover disabled
          </v-card-text>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Nothing will happen when you hover over the card:

Vuetify hover list

We can combine v-hover and v-for to make a single item stand out when the user interacts with the list:

<template>
  <v-app>
    <v-container>
      <v-row class="fill-height" align="center" justify="center">
        <v-col v-for="(letter, index) in letters" :key="index">
          <v-hover v-slot="{ hover }">
            <v-card
              height="200"
              :elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
            >
              <div
                class="text-h1 d-flex justify-center align-center fill-height"
              >
                {{ letter }}
              </div>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      letters: ['A', 'B', 'C'],
    };
  },
};
</script>

Now each card stands out when hovered over:

Hover transitions in Vuetify

With the hover component, we can create components that respond in highly customized ways to user interaction. For example:

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }">
        <v-card class="ma-4 pa-4" width="300">
          <p class="mb-4">Sign up to get started</p>
          <v-expand-transition>
            <div v-if="hover"><v-btn color="primary" dark>Sign up</v-btn></div>
          </v-expand-transition>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

When you hover over the card, the extra portion containing the “Sign Up” button slides out (thanks to the v-expand-transition component):

Conclusion

Vuetify provides the v-hover component for handling toggling component styles based on their current hover state. It provides customization options, such as creating hover event delays and displaying transitions on hover.