css - Vuetify v-list-item 悬停时样式更改

Question

我是 vuetify 新手。
我使用 Vuetify v-list 示例 ( Github )

我的视频列表:

代码:

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

我希望当我将鼠标悬停在每个 v-list-item 上时，会出现一个浅白色背景，中间有一个带有阴影的按钮。 (我在 Photoshop 中制作了这个悬停概念):

我应该使用 v-hover 组件吗？我应该使用什么风格？

谢谢。

Answer 1

使用v-hover和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>

演示:https://codeply.com/p/16POCG8AKf