Vuetify v-list-item style change on hover - css

Question

I'm new to vuetify.
I use Vuetify v-list sample (Github)
My v-list:
Code:
<template>
<v-card
max-width="500"
class="mx-auto"
>
<v-toolbar
color="pink"
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Inbox</v-toolbar-title>
</v-toolbar>
<v-list two-line>
<v-list-item-group
v-model="selected"
multiple
active-class="pink--text"
>
<template v-for="(item, index) in items">
<v-list-item :key="item.title">
<template v-slot:default="{ active, toggle }">
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle class="text--primary" v-text="item.headline"></v-list-item-subtitle>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-list-item-action-text v-text="item.action"></v-list-item-action-text>
</v-list-item-action>
</template>
</v-list-item>
<v-divider
v-if="index + 1 < items.length"
:key="index"
></v-divider>
</template>
</v-list-item-group>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
selected: [2],
items: [
{
action: '15 min',
headline: 'Brunch this weekend?',
title: 'Ali Connors',
subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
},
{
action: '2 hr',
headline: 'Summer BBQ',
title: 'me, Scrott, Jennifer',
subtitle: "Wish I could come, but I'm out of town this weekend.",
},
{
action: '6 hr',
headline: 'Oui oui',
title: 'Sandra Adams',
subtitle: 'Do you have Paris recommendations? Have you ever been?',
},
{
action: '12 hr',
headline: 'Birthday gift',
title: 'Trevor Hansen',
subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
},
{
action: '18hr',
headline: 'Recipe to try',
title: 'Britta Holt',
subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
},
],
}),
}
</script>
I want when I hover on each v-list-item, A light white background with some shadow a button in it's center to be appeared. (I made this hover concept in Photoshop):
Should I use v-hover component? And what style should I use?
Thanks.

Answer 1

Use v-hover and v-overlay...
<v-list two-line>
<v-list-item-group v-model="selected" multiple active-class="pink--text">
<template v-for="(item, index) in items">
<v-hover v-slot:default="{ hover }">
<v-list-item :key="item.title">
<template v-slot:default="{ active, toggle }">
<v-expand-transition>
<v-overlay
absolute
:opacity=".2"
:value="hover"
>
<v-btn
color="white"
class="black--text"
>
Button
</v-btn>
</v-overlay>
</v-expand-transition>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle class="text--primary" v-text="item.headline"></v-list-item-subtitle>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-list-item-action-text v-text="item.action"></v-list-item-action-text>
</v-list-item-action>
</template>
</v-list-item>
</v-hover>
<v-divider v-if="index + 1 < items.length" :key="index"></v-divider>
</template>
</v-list-item-group>
</v-list>
Demo: https://codeply.com/p/16POCG8AKf