84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我正在嘗試使用 Vuetify 元件來實現某些 v-img 縮圖的效果，但沒有成功。我的圖像設定如下：
我將這些水平排列在一行與列中，我試圖將其設置為這樣，當我在每個v-img 上時，它們會分別變暗，並且一個白色的實心v 按鈕將出現在中心，我將為其分配一個鏈接/文本也是如此。由於懸停組件似乎缺乏調光屬性，因此最好的方法是什麼。
我認為您不會直接得到這個，但您不需要做更多的事情來獲得您想要的結果。
開箱即用... 使用Hover元件觸發事件並使用槽（布林）值切換 CSS 類別。
Hover
模板
// ...
自訂... 然後添加一些範圍樣式。以下只是一個簡單的範例，但您可以根據自己的喜好設定樣式。
樣式
.v-image { transition: filter .4s ease-in-out; } .v-card:hover .v-image { filter: brightness(25%); }
範例：https://codepen.io/alexpetergill/pen/NWBadjVp >
文件：https://vuetifyjs.com/en/components/hover/
API：https://vuetifyjs.com/en/api/v-懸停/#slots
我認為您不會直接得到這個，但您不需要做更多的事情來獲得您想要的結果。
開箱即用... 使用
Hover元件觸發事件並使用槽（布林）值切換 CSS 類別。模板
自訂... 然後添加一些範圍樣式。以下只是一個簡單的範例，但您可以根據自己的喜好設定樣式。
樣式
.v-image { transition: filter .4s ease-in-out; } .v-card:hover .v-image { filter: brightness(25%); }範例：https://codepen.io/alexpetergill/pen/NWBadjVp >
文件：https://vuetifyjs.com/en/components/hover/
API：https://vuetifyjs.com/en/api/v-懸停/#slots