在懸停時在 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