How to set an hover effect dynamically on loop of list

Question

I am working on a NuxtJs app. And I am looping from an array of objects. The parent div has a hover effect which I want to be appended to each child individually. But when I hover on one child, it takes effect on other children also. What I want is to make each child has its own hover effect. Check out by code.

    <div v-for="(project, index) in projects" :key="index">
            <nuxt-link
              :to="{ name: 'projects-slug', params: { slug: project.slug } }"
            >
              <div
                class=" mx-auto h-auto flex flex-col lg:w-96 lg:h-96 rounded-3xl cursor-pointer relative"
                @mouseenter="toggle"
              >
                <img
                  class=" w-full"
                  :src="require(`~/assets/images/${project.img}`)"
                  alt="project-image"
                />
                <transition name="caption">
                  <div
                    class=" h-full w-full bg-pryColor rounded-3xl bg-opacity-80 pt-48 lg:pt-60 pl-10 absolute"
                    v-if="load"
                    @mouseleave="toggleOut"
                    :class="myText"
                  >
                    <h1 class="text-2xl md:text-3xl font-semibold">
                      {{ project.title }}
                    </h1>
                    <p>{{ project.description }}</p>
                    <p class=" text-xl md:text-2xl font-medium pt-6 md:pt-8">
                      {{ project.category }}
                    </p>
                  </div>
                </transition>
              </div>

<script>
 data() {
    return {
      load: false
    };
  },

  methods: {
    toggle() {
      this.load = true;
    },
    toggleOut() {
      this.load = false;
    }
  }
</script>

score 0 · Answer 1 · answered Jun 08 '21 at 15:51

You can use CSS condition but quite lengthy. A simple condition will do the work.

<template>
  <section>
    <div>
      <div
        style="display: block"
        v-for="(project, index) in projects"
        :key="index"
      >
        <nuxt-link to="#">
          <div
            :key="index"
            class="mx-auto h-auto flex flex-col lg:w-96 lg:h-96 rounded-3xl cursor-pointer relative"
            @mouseenter="toggle(index)"
            @mouseleave="toggleOut(index)"
          >
            <img
              class="w-full"
              :src="`https://picsum.photos/id/${index}/200/300`"
              alt="project-image"
            />
            <transition name="caption">
              <div
                class="h-full w-full bg-pryColor rounded-3xl bg-opacity-80 pt-48 lg:pt-60 pl-10 absolute"
                v-if="load === index"
              >
                <h1 class="text-2xl md:text-3xl font-semibold">
                  {{ project.title }}
                </h1>
                <p>{{ project.description }}</p>
                <p class="text-xl md:text-2xl font-medium pt-6 md:pt-8">
                  {{ project.category }}
                </p>
              </div>
            </transition>
          </div>
        </nuxt-link>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      projects: [
        {
          slug: "test1",
          img: "test1.jpg",
          title: "test1",
          description: "description1",
          category: "category1",
        },
        {
          slug: "test2",
          img: "test2.jpg",
          title: "test2",
          description: "description2",
          category: "category2",
        },
        {
          slug: "test3",
          img: "test3.jpg",
          title: "test3",
          description: "description3",
          category: "category3",
        },
      ],
      load: null,
    };
  },
  methods: {
    toggle(i) {
      this.load = i;
    },
    toggleOut(key) {
      this.load = null;
    },
  },
};
</script>

Live example: codesanbox.io

How to set an hover effect dynamically on loop of list

1 Answers1