鼠标悬停时仅显示当前卡片悬停效果答案

【问题标题】：on mouseover show only current card hover effect鼠标悬停时仅显示当前卡片悬停效果
【发布时间】：2021-07-03 00:07:39
【问题描述】：

鼠标悬停时仅显示当前卡片悬停效果。目前，如果我的鼠标移到卡片上，那么它会显示每张卡片的效果。

这在 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>

脚本代码：

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component nuxtjs

【解决方案1】：

使用 javascript onmouseover 和 onmouseleave 事件。
使用 Vue 语法可以写成v-on:mouseover 或@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>

另外，我建议使用v-show 而不是v-if，因为在这种情况下它的性能会更好，因为元素可能会在运行时显示/隐藏多次。

【讨论】：

【解决方案2】：

您可以使用 v-for 的 index 来更改当前悬停项。在此示例中，只有一个悬停项的颜色可以更改为 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>

【讨论】：