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

【问题标题】：Vuetify v-list-item style change on hover悬停时Vuetify v-list-item样式更改
【发布时间】：2020-05-24 07:00:21
【问题描述】：

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

我的 v-list：

代码：

<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 组件吗？我应该使用什么样式？

谢谢。

【问题讨论】：

标签： css vue.js hover styles vuetify.js

【解决方案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

【讨论】：