在悬停和按钮居中时添加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组件触发事件，并使用slot (boolean)值切换CSS类(es)。

模板

<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-hover/槽