【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で囲ってあげる

<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>

デモ（Vuetify Playground）

おわりに

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