6 months ago

v-hover not working as expected on image

Posted 6 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:

  <v-row class="mx-0" align="center" justify="center">
    <v-col cols="6" md="3" v-for="c in catImages" :key="" :class="c.class" >
      <v-hover v-slot:default="{ hover }">
        <v-img :src="c.img" max-height="100%">
          {{ }}
              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-for="(link, index) in c.links"
                    :href="link.url + '/' + index"
                      <v-list-item-title class="white--text">{{ link.links }}</v-list-item-title>

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