MattB
4 months ago
846
7
Vue

v-hover not working as expected on image

Posted 4 months ago by MattB

So, I have set up an array of divs with images in them, however when I apply the v-hover tag to them, the hover effect only triggers when you hover over the image, and not the surrounding v-col. Also, it only has the overlay to cover just the image and not the v-col. I tried moving the v-hover tag to encompass the v-col but it complained about too many child elements:

<template>
  <v-row class="mx-0" align="center" justify="center">
    <v-col cols="6" md="3" v-for="c in catImages" :key="c.id" :class="c.class" >
      <v-hover v-slot:default="{ hover }">
        <v-img :src="c.img" max-height="100%">
          {{ catImages.company }}
          <v-expand-transition>
            <div
              v-if="hover"
              class="transition-fast-in-fast-out black darken-2 v-card--reveal white--text text-center"
              style="height: 100%;"
            >
              <v-list dense flat color="black">
                <v-list-item-group class="py-0">
                  <v-list-item
                    v-for="(link, index) in c.links"
                    :key="index"
                    :href="link.url + '/' + index"
                    target="_blank"
                    
                  >
                    <v-list-item-content>
                      <v-list-item-title class="white--text">{{ link.links }}</v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-list-item-group>
              </v-list>
            </div>
          </v-expand-transition>
        </v-img>
      </v-hover>
    </v-col>
  </v-row>
</template>

Please sign in or create an account to participate in this conversation.