在悬停时在 v-img 上添加覆盖并将按钮居中

Question

我正在尝试使用 Vuetify 组件来实现某些 v-img 缩略图的效果，但没有成功。我的图像设置如下：

<v-row class="fill-height pa-5"
                   align-content="center"
                   justify="center">
                <v-col class="text-subtitle-1 text-center"
                       cols="12"
                       sm="3">
                    <v-card>
                        <v-img :src="item.docs.doc1"
                               aspect-ratio=".77"></v-img>
                    </v-card>
                </v-col>
                <v-col class="text-subtitle-1 text-center"
                       cols="12"
                       sm="3">
                    <v-card>
                        <v-img :src="item.docs.doc2"
                               aspect-ratio=".77"></v-img>
                    </v-card>
                </v-col>
                <v-col class="text-subtitle-1 text-center"
                       cols="12"
                       sm="3">
                    <v-card>
                        <v-img :src="item.docs.doc3"
                               aspect-ratio=".77"></v-img>
                    </v-card>
                </v-col>
                <v-col class="text-subtitle-1 text-center"
                       cols="12"
                       sm="3">
                    <v-card>
                        <v-img :src="item.docs.doc4"
                               aspect-ratio=".77"></v-img>
                    </v-card>
                </v-col>
            </v-row>

我将这些水平排列在一行与列中，我试图将其设置为这样，当我在每个 v-img 上时，它们会分别变暗，并且一个白色的实心 v 按钮将出现在中心，我将为其分配一个链接/文本也是如此。由于悬停组件似乎缺乏调光属性，因此最好的方法是什么。

Answer 1

我认为您不会直接得到这个，但您不需要做更多的事情来获得您想要的结果。

开箱即用... 使用 Hover 组件触发事件并使用槽（布尔）值切换 CSS 类。

模板

<v-hover v-slot="{ hover }">
  <v-card :class="{ 'on-hover': hover }">
    // ...
  </v-card>
</v-hover>

自定义... 然后添加一些范围样式。以下只是一个简单的示例，但您可以根据自己的喜好设置样式。

样式

.v-image {
  transition: filter .4s ease-in-out;
}

.v-card:hover .v-image {
  filter: brightness(25%);
}

示例：https://codepen.io/alexpetergill/pen/NWBadjV

文档：https://vuetifyjs.com/en/components/hover/

API：https://vuetifyjs.com/en/api/v-悬停/#slots