在悬停时在 v-img 上添加覆盖并将按钮居中
P粉754473468
P粉754473468 2023-08-28 17:13:34
0
1
493
<p>我正在尝试使用 Vuetify 组件来实现某些 v-img 缩略图的效果,但没有成功。我的图像设置如下:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>我将这些水平排列在一行与列中,我试图将其设置为这样,当我在每个 v-img 上时,它们会分别变暗,并且一个白色的实心 v 按钮将出现在中心,我将为其分配一个链接/文本也是如此。由于悬停组件似乎缺乏调光属性,因此最好的方法是什么。</p>
P粉754473468
P粉754473468

全部回复(1)
P粉189606269

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

开箱即用... 使用 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 p >

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板