<template>
  <v-row>
    <v-col
      cols="12"
      sm="6"
    >
      <v-hover
        v-slot="{ isHovering, props }"
        open-delay="200"
      >
        <v-card
          :class="{ 'on-hover': isHovering }"
          :elevation="isHovering ? 4 : 1"
          class="mx-auto"
          height="350"
          max-width="350"
          v-bind="props"
        >
          <v-card-text class="font-weight-medium mt-12 text-center text-body-large">
            Open Delay (Mouse enter)
          </v-card-text>
        </v-card>
      </v-hover>
    </v-col>

    <v-col
      cols="12"
      sm="6"
    >
      <v-hover
        v-slot="{ isHovering, props }"
        close-delay="200"
      >
        <v-card
          :class="{ 'on-hover': isHovering }"
          :elevation="isHovering ? 4 : 1"
          class="mx-auto"
          height="350"
          max-width="350"
          v-bind="props"
        >
          <v-card-text class="font-weight-medium mt-12 text-center text-body-large">
            Close Delay (Mouse leave)
          </v-card-text>
        </v-card>
      </v-hover>
    </v-col>
  </v-row>
</template>

<style lang="sass" scoped>
.v-card.on-hover.v-theme--dark
  background-color: rgba(#FFF, 0.8)
  >.v-card__text
    color: #000
</style>
