[Vuejs]-On mouseover show only current card hover effect

by

0👍

Use the javascript onmouseover and onmouseleave events.
With Vue syntax it can be written v-on:mouseover or @mouseover.

<div @mouseover="isHovered = true" @mouseleave="isHovered = false" class="team-img">
  <img
    v-show="isHovered"
    :srcset="member.node.teamMemberFields.imageGif"
  />
  <img v-show="!isHovered" :srcset="member.node.teamMemberFields.image.srcSet" />
</div>

Also, I suggest to use v-show instead of v-if as it will be much more performant in this case because the element may be shown / hide multiple times at runtime.

0👍

You can use the index of v-for to make a change to the current hovering item. In this example, the color of only one hovered item can be changed to red.

<template>
  <template v-for="(item, index) in items" :key="item">
    <h3
      @mouseover="{ isHovered = true; indexHover = index; }"
      @mouseleave="isHovered = false"
      :style="isHovered && indexHover == index ? 'color:red' : ''"
    >
      {{ item }}
    </h3>
  </template>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      items: ['item1', 'item2', 'item3'],
      isHovered: false,
      indexHover: null,
    };
  },
}
</script>

Leave a comment