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