如何使用悬停事件使元素中的v菜单工作

Question

<template>
<v-hover v-slot:default="{ hover }">
<div class="img-card">
<div class="img-wrapper">
<img :src="url" alt="image of gallery" />
<transition name="fade">
<div class="cover" :class="{ 'cover-active': hover }">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-bind="attrs"
v-on="on"
solo
append-icon="mdi-chevron-down"
label="Regular"
class="menu"
></v-text-field>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<div class="under-wrapper">
<v-btn fab small color="#fff">
<v-icon>mdi-upload</v-icon>
</v-btn>
<v-btn fab small color="#fff">
<v-icon>mdi-dots-horizontal</v-icon>
</v-btn>
</div>
</div>
</transition>
</div>
<p>{{ author }}</p>
</div>
</v-hover>
</template>
<script>
export default {
name: 'ImgCard',
props: ['url', 'author'],
data() {
return {
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.img-card {
}
.img-wrapper {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.cover {
display: none;
background: rgba($color: #222, $alpha: 0.3);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
}
.cover-active {
display: block;
}
.menu {
width: 100%;
border-radius: 12px;
}
img {
display: block;
}
p {
font-weight: bold;
}
//animation
.fade-enter-active,
.fade-leave-active {
transition: opcity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

我希望制作一个像pinterest的图像卡一样的组件使用Vue、Vuetify、v菜单、v悬停、mouseevnet

我以为它会起作用，但有点模棱两可。"v-menu__content"在元素外部呈现，并添加鼠标事件，然后它就奇怪地工作了。

如果我在"img卡"上添加功能，并尝试将鼠标悬停在下拉菜单上，它就会消失。。因为下拉菜单在"img卡"之外或者是反复开关。

我想修复不自然的东西。我会放弃使用"v菜单"吗

如果我的问题没有内容，请告诉我。

Answer 1

也许这有助于

当我将鼠标悬停在上时，会出现此工具提示

<v-tooltip top max-width="500">
<template v-slot:activator="{ on }">
<v-icon v-on="on">info_outlined</v-icon>
</template>
<span>
EXAMPLE TEXT
</span>
</v-tooltip>