【Vuetify3】ボタンをホバーした際に色を変える

サンプル

<template>
  <v-hover>
    <template #default="{ isHovering, props }">
      <v-btn
        v-bind="props"
        :color="isHovering ? 'red lighten-1' : undefined"
        text="削除"
        variant="outlined"
      />
    </template>
  </v-hover>
</template>

デモ（Vuetify Playground）

直接v-btnに.class-name :hoverといったCSSを適用しても、ボタン内のテキストに対してしか効かない。

しかもv-btn自体にもホバー時のcolorを変えられる機能はないときた。

　　　　　・

　　　　　・

　　　　　・

では別でホバー時の挙動を扱えるやつあるのでは！？？

ありました↓

v-btnで既にv-bindが使われていた場合

divで囲ってあげる

<template>
  <v-dialog>
    <template #activator="{ props: activatorProps }">
      <v-hover>
        <template #default="{ isHovering, props: hoverProps }">
          <div v-bind="hoverProps" style="width:fit-content">
            <v-btn
              v-bind="activatorProps"
              :color="isHovering ? 'red lighten-1' : undefined"
              text="削除"
              variant="outlined"
            />
          </div>
        </template>
      </v-hover>
    </template>
    ...
  </v-dialog>
</template>

デモ（Vuetify Playground）

おわりに

Vuetify公式サンプル、絶妙に求めてるものがないがち