【Vuetify3】ボタンをホバーした際に色を変える
【Vuetify3】ボタンをホバーした際に色を変える updated@2025-05-09サンプル
<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公式サンプル、絶妙に求めてるものがないがち
スポンサーリンクBOT