Why the card hover is out from the container? - vue.js

Question

The problem is when I hover the cursor to the card the hover card are out from the main container which avoid me to click the navigation bar.
I have try to put inside the v-content and v-container but still not working.
<template>
<div>
<br>
<br>
<br>
<v-container grid-list-md>
<v-layout row wrap>
<v-flex xs6 md4 sm4 lg3 xl2 v-for="n in 12" :key="n" class="pa-2">
<v-hover>
<v-card
slot-scope="{ hover }"
:class="`elevation-${hover ? 12 : 2}`"
class="max-w-sm rounded overflow-hidden shadow-lg"
>
<v-img
src="https://www.candere.com/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/g/r/gr00237_1_2.jpg"
>
<v-chip class="ma-2" small color="#e5af57" text-color="black">916</v-chip>
</v-img>
<v-card-text>
<table style="width:100%">
<tr>
<td colspan="2">
<h4 class="text-sm-center">Bunga Emas Arau</h4>
</td>
<br>
</tr>
<tr>
<td colspan="2">
<v-divider></v-divider>
</td>
<br>
</tr>
<tr class="font-weight-small">
<td>Weight Approx.</td>
<td>2.37 g +/-</td>
</tr>
<tr class="font-weight-medium">
<td>Price</td>
<td>RM300-2300</td>
</tr>
</table>
</v-card-text>
<v-fade-transition>
<v-overlay v-if="hover" absolute color="#190033">
<v-btn color="#d19f4e">See more info</v-btn>
</v-overlay>
</v-fade-transition>
</v-card>
</v-hover>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I want the hover to stay inside and doesn't interrupt the main navigation bar.

Answer 1

Try to add z-index="0" to <v-overlay></v-overlay>.
new Vue({
el: "#app"
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-container grid-list-md>
<v-layout row wrap>
<v-flex xs6 md4 sm4 lg3 xl2 v-for="n in 12" :key="n" class="pa-2">
<v-hover>
<v-card slot-scope="{ hover }" :class="`elevation-${hover ? 12 : 2}`" class="max-w-sm rounded overflow-hidden shadow-lg">
<v-img src="https://www.candere.com/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/g/r/gr00237_1_2.jpg">
<v-chip class="ma-2" small color="#e5af57" text-color="black">916</v-chip>
</v-img>
<v-card-text>
<table style="width:100%">
<tr>
<td colspan="2">
<h4 class="text-sm-center">Bunga Emas Arau</h4>
</td>
<br>
</tr>
<tr>
<td colspan="2">
<v-divider></v-divider>
</td>
<br>
</tr>
<tr class="font-weight-small">
<td>Weight Approx.</td>
<td>2.37 g +/-</td>
</tr>
<tr class="font-weight-medium">
<td>Price</td>
<td>RM300-2300</td>
</tr>
</table>
</v-card-text>
<v-fade-transition>
<v-overlay v-if="hover" absolute color="#190033" z-index="0">
<v-btn color="#d19f4e">See more info</v-btn>
</v-overlay>
</v-fade-transition>
</v-card>
</v-hover>
</v-flex>
</v-layout>
</v-container>
</div>

Answer 2

This is probably a z-index problem for the v-overlay element. Try lowering the z-index prop for the v-overlay.