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

Posted 2023-02-23

【中文标题】鼠标悬停时仅显示当前卡片悬停效果

【英文标题】：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
    ,
  ,
...

【参考方案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>