Javascript 鼠标悬停时仅显示当前卡的悬停效果

鼠标悬停时仅显示当前卡的悬停效果。 此时，如果我的鼠标移到牌的上方，它会显示每一张牌的效果

在Vue Nuxtjs中，这是如何实现的

我想要达到的是这个。若鼠标继续，那个么它将开始播放gif，若鼠标停止，那个么它将显示静态图像

我的代码：

<div v-b-hover="handleHover" class="team-img">
  <img
    v-if="isHovered"
    :srcset="member.node.teamMemberFields.imageGif"
  />
  <img v-else :srcset="member.node.teamMemberFields.image.srcSet" />
</div>

---

使用javascript

onmouseover

和

onmouseleave

事件。
使用Vue语法，可以将其写入

v-on:mouseover

或

@mouseover

此外，我建议使用

v-show

而不是

v-if

，因为在这种情况下，元素可能会在运行时多次显示/隐藏，因此性能会更好

import gql from 'graphql-tag'
export default {
  data() {
    return {
      isHovered: false,
    }
  },
  methods: {
    handleHover(hovered) {
      this.isHovered = hovered
    },
  },
...